Question

我正在使用带有webpack css-loader的CSS模块，然后我将它们与mini-css-extract-plugin捆绑在一起。以下是我的配置的样子：

{
    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

您可以编写一个webpack插件以在css捆绑包上运行，并在其上应用postCss插件。

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

在css-loader之后使用postcss-loader

3 个答案: