使用MiniCssExtractPlugin时CSS Modules生成空CSS文件求助

我之前踩过类似的坑，你的问题大概率是PurifyCSSPlugin 误删了所有CSS内容，结合你的配置帮你梳理下：

核心原因：PurifyCSS 识别不了 CSS Modules 的动态类名 #

你配置的PurifyCSSPlugin会扫描src下的所有JS文件，查找用到的CSS类名，但CSS Modules的类名是编译时动态生成的（比如[name]_[local]_[hash:base64:5]这种格式），你源码里写的是import styles from './xxx.module.scss'，然后用styles.btn这种方式引用类名，PurifyCSS静态扫描时根本找不到对应的原始类名，直接判定所有CSS都没被使用，所以把生成的CSS文件清空了。

快速修复方案 #

1. 先临时移除 PurifyCSSPlugin #

注释掉生产环境的PurifyCssPlugin配置，重新打包试试：

if(isProd){
  baseConfig.plugins=[
    MiniCssPlugin,
    // PurifyCssPlugin, // 先注释掉这行
  ];
}

这时候再打包，应该就能看到正常的CSS内容了，验证这个问题是否由PurifyCSS导致。

2. 改用支持CSS Modules的PurgeCSS（长期方案） #

如果需要保留“清除未使用CSS”的功能，建议替换成更现代的purgecss-webpack-plugin，它原生支持CSS Modules的类名识别。

先安装依赖：

npm install purgecss-webpack-plugin --save-dev

然后修改Webpack配置：

const path = require('path');
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PurgeCSSPlugin = require('purgecss-webpack-plugin'); // 替换原来的purifycss-webpack
const isProd = process.env.NODE_ENV === 'production';
const PATHS = { app: path.join(__dirname, "src") };

const MiniCssPlugin = new MiniCssExtractPlugin({
  filename: "[name].css",
});

// 新的PurgeCSS配置
const PurgeCssPlugin = new PurgeCSSPlugin({
  paths: glob.sync(`${PATHS.app}/**/*.{js,jsx}`, { nodir: true }),
  // 配置安全列表，避免误删动态类名
  safelist: {
    deep: [/[a-z]+_[a-z]+_[0-9a-f]{5}/] // 匹配CSS Modules生成的类名格式
  }
});

const cssDevRules=[
  { loader:'style-loader' },
  { loader:'css-loader?modules&localIdentName=[name]_[local]_[hash:base64:5]', },
  { loader:'sass-loader', }
];

const cssProdRules=[
  { loader: MiniCssExtractPlugin.loader, },
  { loader:'css-loader?modules&localIdentName=[name]_[local]_[hash:base64:5]', },
  { loader:'sass-loader', }
];

console.log("is prod:"+isProd);

const baseConfig = {
  module: {
    rules: [
      {
        test: /\.(css|sass|scss)$/,
        use: isProd? cssProdRules:cssDevRules,
        exclude: /node_modules/,
      },
    ]
  },
};

if(isProd){
  baseConfig.plugins=[
    MiniCssPlugin,
    PurgeCssPlugin,
  ];
}

module.exports = baseConfig;

其他排查点 #

• 确认所有Sass文件都在JS中被import：Webpack只会处理被JS引入的样式文件，如果某个组件的样式没被import，就不会被提取到CSS文件里。
• 检查插件版本兼容性：确保mini-css-extract-plugin的版本和你的Webpack版本匹配（Webpack 4用^0.11.x，Webpack 5用^2.x及以上）。
• 查看打包日志：运行webpack --mode production时，留意有没有CSS相关的警告或错误，比如loader报错导致样式处理中断。

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