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

Question

我使用Vite创建了一个Svelte项目，并添加了windicss。我使用Yarn作为构建工具。我使用https://windicss.org/integrations/vite.html#install将WindiCSS添加到vite中。当我开始这个项目时，它工作得很好。

yarn dev

但Windi CSS的HMR (热模块重新加载)不起作用。但是，当我关闭服务器并重新启动它时，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.js文件，

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工作。