Svelte+Webpack项目中TailwindCSS在Watch模式下不重载问题求助

针对npm run watch模式下修改文件后TailwindCSS新生成的类无法加载的问题，以下是具体解决思路：

1. 禁用Svelte预处理器缓存 #

默认情况下SveltePreprocess会缓存预编译结果，导致文件修改时PostCSS（包含Tailwind）不会重新执行，无法生成新类样式。修改webpack.config.js中的SveltePreprocess配置：

{
    test: /\.svelte$/,
    loader: 'svelte-loader',
    options: {
        preprocess: SveltePreprocess({
            postcss: {
                plugins: [
                    require("tailwindcss"),
                    require("autoprefixer")
                ]
            },
            cache: false // 禁用预处理器缓存，确保文件修改时重新执行PostCSS
        })
    }
},

2. 单独抽离Tailwind样式入口 #

将Tailwind基础样式单独放在CSS文件中，避免依赖每个Svelte组件的PostCSS处理，让Webpack更准确监听样式依赖变化：

1. 在src/css/tailwind.css中写入：

@tailwind base;
@tailwind components;
@tailwind utilities;

2. 在项目主入口文件（如src/main.js或src/main.ts）中引入该文件：

import './css/tailwind.css';

3. 优化Webpack监听配置 #

确保Webpack能正确监听所有相关文件，避免遗漏导致更新不触发。在webpack.config.js中添加watchOptions：

module.exports = {
    // ...其他配置
    watchOptions: {
        ignored: /node_modules/, // 忽略node_modules目录，提升监听效率
        poll: 1000 // 可选，针对Windows WSL等文件系统启用轮询监听
    }
};

4. 同步监听TypeScript编译 #

当前watch脚本仅启动Webpack监听，未监听TypeScript文件变化，若修改TS文件可能导致Tailwind无法扫描到新类。修改package.json的脚本：

{
  "build": "tsc && webpack --mode=development",
  "watch": "concurrently \"tsc --watch\" \"webpack --watch --mode=development\""
}

执行npm install -D concurrently安装依赖工具。

5. 清除Webpack缓存 #

手动删除Webpack缓存目录（通常为node_modules/.cache）或项目输出目录（如dist），清除旧缓存后重新启动npm run watch。

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