purgecss-webpack-plugin 遇到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模块化的样式被排除再外,所以这里要做个过滤
      },
    }),

问题解决

posted @ 2022-08-22 15:55  洛晨随风  阅读(867)  评论(0编辑  收藏  举报