yarnpkg - Windi CSS HMR 不适用于 Svelte + vite 应用
问题描述
我用 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
不知道我是否遗漏了其他任何东西。
解决方案
我必须先放WindiCSS()
HMRsvelte()
才能工作。
推荐阅读
- sapui5 - 消除 ui5 中图表列之间的间隙
- shell - 如何检查命令名称是“find”并在zsh中的命令提示符之前退出提示符
- entity-framework - Linq Query Where 子句无法正常工作
- apache-beam - apache beam for python 是否支持商业化的 flink runner?
- java - 如何使用 OpenJ9 Xtrace 选项转储方法参数的内容
- powershell - 如何使用 PowerShell 中的函数从命令行执行?
- javascript - 如何使用模式更改工具提示的外观:Chart.js 中的索引
- raku - (标识符)术语与常量与空签名例程
- ios - Swift:TableViewController 中的 UIControl 在被 ViewController 调用时发现为零
- c# - 从现有字符串构建新的类似路径的字符串