在css-loader之后使用postcss-loader

Question

我使用的CSS模块与webpack的css-loader，然后我捆绑他们与mini-css-提取-插件。下面是我的配置：

{
    test: /\.css$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: "css-loader",
        options: {
          modules: true,
          localIdentName: "[name]-[local]_[hash:base64:5]",
          imports: true,
          importLoaders: 1
        }
      },
      "postcss-loader"
    ]
  }

出于某些原因(参见注释部分)，我真的希望将postcss-loader应用于整个捆绑包，而不是每个单独的.css文件。我怎样才能做到这一点呢？

Answer 1

感谢你们试图解决我的问题。毕竟我已经找到了解决方案。我不再使用postcss-loader，而是像这样使用OptimizeCssAssetsPlugin：

new OptimizeCssAssetsPlugin({
  cssProcessor: postcss([CSSMQPacker]),
}),

Answer 2

您是否正在使用@import引用您的其他CSS？

我一直在尝试做同样的事情来合并重复的CSS选择器。我使用postcss-import已经取得了一定的成功。它将组合你所有的导入，这样你就可以在css-loader打包它之前用postcss处理它。

{
    test: /\.css$/,
    use: [
        MiniCssExtractPlugin.loader,
        {
            loader: 'css-loader',
            options: {
                modules: true,
                localIdentName: '[name]-[local]_[hash:base64:5]'
            }
        },
        {
            loader: 'postcss-loader',
            options: {
                plugins: [
                    require('postcss-import'),
                    require('css-mqpacker')
                ]
            }
        }
    ]
}

不幸的是，这可能会导致资源路径问题，因为postcss对webpack的路径解析一无所知。

你可以用别名来解决这个问题。

require('postcss-import')({
    resolve: id => id.replace(/^~?(@example-alias)/, path.resolve(__dirname, './src'))
}),

希望这能有所帮助。我也想要一个更简单的解决方案与css-loader。理想情况下：导入和组合 (css-loader) > postcss >捆绑包 (css-loader)

​

Answer 3

你可以编写一个在css bundle上运行的webpack插件，然后在上面应用你的postCss插件。

您可以查看我编写的一些插件作为参考：https://github.com/wix-incubator/extract-tpa-style-webpack-plugin/blob/master/src/index.js#L71