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

Posted 2023-02-22

【中文标题】如何通过新的 @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?

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

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

谢谢！

【参考方案1】：

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

"mergeStrategies": 
    "module.rules": "prepend"

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

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