7

我将 CSS 模块与 webpack css-loader 一起使用，然后将它们与 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 文件，而是应用于整个捆绑包。我怎样才能做到这一点？

4

3 回答 3

4

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

new OptimizeCssAssetsPlugin({
  cssProcessor: postcss([CSSMQPacker]),
}),
于 2018-07-09T08:24:05.290 回答
0

您是否使用@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 > bundle (css-loader)

于 2018-07-06T16:41:22.660 回答
0

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

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

于 2018-07-07T08:09:31.433 回答