Windi CSS HMR不适用于Svelte + vite应用程序

Question

我用Vite创建了一个Svelte项目，并添加了windicss。我使用Yarn作为构建工具。我使用https://windicss.org/integrations/vite.html#install添加了WindiCSS到vite。当我使用

启动项目时，它工作得很好

yarn dev

但是HMR(热模块重载)对Windi CSS不起作用。但是当我关闭服务器并重新启动时，它会接收到Windi CSS的更改。甚至Devtool的修改都工作得很好，只有HMR不能工作。

package.json文件，

{
"name": "svelte-in",
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.11",
"svelte": "^3.37.0",
"vite": "^2.6.4",
"vite-plugin-windicss": "^1.4.11",
"windicss": "^3.1.9"
}
}

vite.config.jsfile，

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import WindiCSS from 'vite-plugin-windicss'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
svelte(), 
WindiCSS()
]
})

main.js为

import App from './App.svelte'
import 'virtual:windi.css'
import 'virtual:windi-devtools'     // To enable windi in dev tools
const app = new App({
target: document.getElementById('app')
})
export default app

不知道我是否还遗漏了什么。

Answer 1

我必须把WindiCSS()放在svelte()之前才能使HMR工作。