Vite修改导入的LESS文件时未重新编译CSS问题求助

问题现象 #

入口文件main.js导入_app.less，_app.less通过@import引入子LESS文件时，修改子文件控制台能看到HMR更新事件，但浏览器Network加载的仍是旧样式；直接修改_app.less则更新正常。

解决方案 #

1. 配置vitePreprocess追踪LESS依赖 #

vitePreprocess默认可能未正确解析LESS的@import依赖，导致子文件变更未被标记为_app.less的依赖项。修改Svelte插件配置，明确开启LESS的依赖追踪：

// vite.config.js
export default defineConfig({
    // ...其他配置
    plugins: [
        svelte({
            configFile: false,
            preprocess: vitePreprocess({
                less: {
                    javascriptEnabled: true,
                    // 确保LESS处理器正确解析导入路径，让Vite追踪依赖
                    paths: [path.resolve(__dirname, 'src/webapp/style')]
                }
            })
        }),
        tailwindcss(),
    ],
})

2. 配置Vite原生CSS预处理选项 #

确保Vite自身的CSS处理器能正确处理LESS的依赖，添加css配置项：

// vite.config.js
export default defineConfig({
    // ...其他配置
    css: {
        preprocessorOptions: {
            less: {
                javascriptEnabled: true,
                // 可添加全局变量等配置，同时保证依赖可追踪
            },
        },
        devSourcemap: true // 开启sourcemap辅助调试依赖问题
    },
})

3. 确认全局样式的处理逻辑 #

由于全局LESS是在main.js中直接导入，而非Svelte组件内导入，需确保Vite原生处理器而非Svelte插件主导全局样式的编译：

• 确保已安装less依赖：npm install less -D
• 检查Svelte插件是否有过滤规则，避免干扰全局样式的HMR流程

4. 清理Vite缓存 #

删除node_modules/.vite缓存目录，重启开发服务器，消除缓存导致的依赖追踪失效问题。

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