如何通过新的 @angular/cli v7 angular.json 或 custom-webpack.config.js 添加额外的 postcss 插件？答案

【问题标题】：How do I add an additional postcss plugin via the new @angular/cli v7 angular.json or custom-webpack.config.js?如何通过新的 @angular/cli v7 angular.json 或 custom-webpack.config.js 添加额外的 postcss 插件？
【发布时间】：2019-05-26 01:51:55
【问题描述】：

@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-scrolling postcss-loader 插件，它自动启用所有可滚动容器上的 iOS 动量滚动。

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

这是我在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 配置的指南或建议，这是修改的起点以及预览/查看要作为调试执行的代码的方法。

此外，类似自定义的示例也很棒。

谢谢！

【问题讨论】：

标签： angular7 postcss-loader angular-cli-v7

【解决方案1】：

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

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

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

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

【讨论】：