账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    React中使用了react-css-modules后如何消除无用的CSS
    41
    0

    用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...

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部