鍍金池/ 問答/HTML/ React中使用了react-css-modules后如何消除無用的CSS

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

用purifycss-webpack插件進(jìn)行如下配置:

const path = require("path");
const glob = require("glob");
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: path.resolve(__dirname,"../src/styles"),//styles文件夾是全局樣式,不對全局樣式進(jìn)行CSS模塊化
        use: extractTextPlugin.extract({
            fallback: "style-loader",
            use:  [
                {
                    loader: "css-loader",
                    options: {
                        modules: true,
                        localIdentName: "MODULES-[hash:base64:5]"http://設(shè)置className打包后都以Modules為前綴
                    }
                },
                {
                    loader: "sass-loader"
                },
                {
                    loader: "sass-resources-loader",
                    options: {
                        resources: path.resolve(__dirname,'../src/styles/variable.scss')//指定全局樣式文件,定義了一些變量以及函數(shù)
                    }
                }
            ]
        })
      }
    ]
  },
  plugins: [
    new extractTextPlugin("css/[name].[contenthash:5].css"),
    new PurifyCSSPlugin({
        //用來指定清除無效CSS的html文件,這里是單頁應(yīng)用,就指定首頁index.html
        paths: glob.sync(path.resolve(__dirname,'../src/index.html')),
        //這里設(shè)置為scss是因?yàn)轫?xiàng)目樣式都是用scss寫的
        styleExtensions: ['.scss'],
        purifyOptions: {
        //這個選項(xiàng)主要是針對CSS模塊化開啟白名單的,這里就設(shè)置了以MODULES為前綴的className
            whitelist: ['*MODULES*']
        }
    })
  ]
};

我打包項(xiàng)目發(fā)現(xiàn)根本沒有去除無用的CSS,請問問題出在哪里?

查看github,發(fā)現(xiàn)類似問題:https://github.com/webpack-co...

回答
編輯回答
陪妳哭

你好,css modules使用purify-webpack沒報錯嗎

2017年9月24日 23:36