在 css-loader 之后使用 postcss-loader答案

【问题标题】：Using postcss-loader after css-loader在 css-loader 之后使用 postcss-loader
【发布时间】：2018-11-02 12:34:16
【问题描述】：

我将 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"
    ]
  }

出于某种原因（请参阅 cmets 部分），我真的很想将 postcss-loader 应用于不是每个单独的 .css 文件，而是应用于整个包。我怎样才能做到这一点？

【问题讨论】：

每个 css 模块都封装了组件应该响应的所有媒体查询。我想使用css-mqpacker 将它们组合在一起。事实上，一切都在我当前的配置中运行，但 css-mqpacker 在一个特定的 .css 文件中运行。而我想要的是将 postcss 的东西应用到整个包中

标签： webpack css-loader css-modules postcss-loader

【解决方案1】：

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

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

【讨论】：

非常感谢！这可能是整个互联网上的唯一提示。由于在文件之间共享postcss-css-variables，我现在使用您的解决方案。我只有一个问题...使用postcss-loader 时，我可以正确收到variable --xyz is undefined and used without a fallback 之类的警告，但是当通过插件从postcss-loader 切换到您的解决方案时，警告完全被吞没了，所以我无法检测到可能的问题。你能帮我解决这个问题吗？
下一个问题是源映射不工作，并且在监视期间构建时间很慢，因为它一次又一次地处理所有文件，而不仅仅是一个修改过的文件。所以我想我应该避免走这条路。

【解决方案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 的更简单的解决方案。理想情况下：import & combine (css-loader) > postcss > bundle (css-loader)

【讨论】：

【解决方案3】：

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

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

【讨论】：