purgecss-webpack-plugin 遇到css 模块化后排除的解决方案

2022-08-22 16:00:16 阅读：166 来源： 互联网

标签：__ plugin 没用到 module webpack purgecss css

purgecss-webpack-plugin 的作用是在webpack打包的时候排除没用到的css样式，这里如果在css上设置了模块化 module就会导致module的样式在打包的时候被排除，尽管它会有被用到，这时候的解决方案可以做如下处理：

 {
            loader: "css-loader",
            options: {
              sourceMap: false,
              // modules: true,
              modules: {
                localIdentName: "css__module__[name]__[local][chunkhash:8]",//加个css__module__前缀，防止purgecss-webpack-plugin打包的时候给排除了
              },
              importLoaders: 1,
            },
          },

 // 去除没用到的css插件
    new PurgeCSSPlugin({
      paths: globAll.sync([
        `${path.join(__dirname, "../src")}/**/*.tsx`,
        `${path.join(__dirname, "../public")}/index.html`,
      ]),
      safelist: {
        standard: [/^ant-/], // 过滤以ant-开头的类名，哪怕没用到也不删除，如果是抖音库就过滤semi
        deep: [/css__module__/],//因为这个插件会导致css模块化的样式被排除再外，所以这里要做个过滤
      },
    }),

问题解决

标签：__,plugin,没用到,module,webpack,purgecss,css
来源： https://www.cnblogs.com/llcdbk/p/16613092.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

purgecss-webpack-plugin 遇到css 模块化后排除的解决方案