如何通过新的@ angular / cli v7 angular.json或custom-webpack.config.js添加其他Postcss插件？

Question

@ angular / cli @ 7 +允许customWebpackConfig指定以提供自定义Webpack配置，例如：

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./build/custom-webpack.config.js",
          "mergeStrategies": {
            "externals": "prepend"
          }
        },
        ...

然后，从技术上讲，该文件允许您添加，添加或替换webpack配置的任何部分。在升级到@angular@7.1.3和之前，@angular/cli@7.1.3我们已经弹出webpack配置进行了一些添加。其中一个附加功能是postcss-momentum-scrollingpostcss-loader插件，该插件自动在所有可滚动容器上启用iOS动量滚动。

我正在寻求有关如何通过允许的受支持的自定义来生成必要的自定义Webpack代码以加载此插件的支持@angular/cli@7+。

这是我在custom-webpack.config.js文件中尝试过的示例：

const postcssMomentumScrolling = require('postcss-momentum-scrolling');

module.exports = {
  module: {
      rules: [
          {
              test: /\.scss$|\.sass$/,
              use: [
                  {
                      "loader": "postcss-loader",
                      "options": {
                          "plugins": [
                            postcssMomentumScrolling(),
                          ]
                      }
                  }
              ]
          },
      ],
  },
};

一旦我触摸webpack配置的scss块，它似乎会执行替换操作而不是合并或添加操作，从而破坏了构建。

我想知道是否有人对如何查看@angular/cli生成的初始Webpack配置有指导或建议，这是修改的起点，也是预览/查看要作为调试执行的代码的方法。

同样，类似定制的示例也很好。

谢谢！

Answer 1

我认为您需要告诉“customWebpackConfig”要合并哪一部分。像这样：

"mergeStrategies": {
    "module.rules": "prepend"
}

通过这种方式，您将告诉与前置策略合并。根据“custom-webpack”文档，它应该默认为“append”，这在您的示例中似乎并非如此。

自从你提出问题以来已经有一段时间了，但我实际上想问一下你是否能够解决它，因为我在合并我的“module.rules”时遇到了一些问题......它似乎只有在以下情况下才有效我设定了“替换”策略。