React中使用了react-css-modules后如何消除无用的CSS

Question

用purifycss-webpack插件进行如下配置：

const path = require("path");
const glob = require("glob");
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: path.resolve(__dirname,"../src/styles"),//styles文件夹是全局样式，不对全局样式进行CSS模块化
        use: extractTextPlugin.extract({
            fallback: "style-loader",
            use:  [
                {
                    loader: "css-loader",
                    options: {
                        modules: true,
                        localIdentName: "MODULES-[hash:base64:5]"//设置className打包后都以Modules为前缀
                    }
                },
                {
                    loader: "sass-loader"
                },
                {
                    loader: "sass-resources-loader",
                    options: {
                        resources: path.resolve(__dirname,'../src/styles/variable.scss')//指定全局样式文件，定义了一些变量以及函数
                    }
                }
            ]
        })
      }
    ]
  },
  plugins: [
    new extractTextPlugin("css/[name].[contenthash:5].css"),
    new PurifyCSSPlugin({
        //用来指定清除无效CSS的html文件，这里是单页应用，就指定首页index.html
        paths: glob.sync(path.resolve(__dirname,'../src/index.html')),
        //这里设置为scss是因为项目样式都是用scss写的
        styleExtensions: ['.scss'],
        purifyOptions: {
        //这个选项主要是针对CSS模块化开启白名单的，这里就设置了以MODULES为前缀的className
            whitelist: ['*MODULES*']
        }
    })
  ]
};

我打包项目发现根本没有去除无用的CSS，请问问题出在哪里？

查看github，发现类似问题：https://github.com/webpack-co...

Answer 1

你好，css modules使用purify-webpack没报错吗