Svelte+Vite项目使用Yarn构建时Windi CSS HMR热重载失效问题

修复步骤 #

1. 新增WindiCSS扫描配置

默认vite-plugin-windicss不会主动扫描.svelte后缀的文件，导致你在Svelte组件中新增的Windi类名无法被实时识别，需要手动配置扫描范围。
在项目根目录新建windi.config.js文件，写入以下内容：

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  scan: {
    include: ['src/**/*.{svelte,html,js,ts}'],
    exclude: ['node_modules', '.git', 'dist']
  }
})

2. 调整Vite配置

需要修正两个配置点：WindiCSS插件加载顺序、Svelte插件的样式输出配置，修改你的vite.config.js如下：

import { defineConfig } from 'vite'
import WindiCSS from 'vite-plugin-windicss'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [
    // WindiCSS插件必须放在Svelte插件之前加载
    WindiCSS(),
    svelte({
      // 开启样式抽离，将Svelte组件内的样式交给Vite统一处理，是HMR生效的必要条件
      emitCss: true,
      // 显式开启Svelte热重载功能
      hot: true
    })
  ]
})

3. 升级兼容依赖版本

你当前使用的vite-plugin-windicss和windicss版本和Vite 2.6.x存在已知的HMR兼容缺陷，执行以下命令升级到对应兼容的稳定版本：

yarn add -D vite-plugin-windicss@^1.8.10 windicss@^3.5.6

升级完成后删除项目下的node_modules文件夹、Yarn缓存文件，重新执行yarn dev启动项目即可正常使用WindiCSS的HMR功能。

内容的提问来源于stack exchange，提问作者Bala