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

Posted 2023-02-16

【中文标题】Windi CSS HMR 不适用于 Svelte + vite 应用程序

【英文标题】：Windi CSS HMR not working for Svelte + vite app

【发布时间】：2021-12-04 15:45:00

【问题描述】：

我用 Vite 创建了一个 Svelte 项目并添加了 windics。我使用 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

不确定我是否遗漏了其他任何内容。

【参考方案1】：

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

【讨论】：

这很好用。