How do I add an additional postcss plugin via the new @angular/cli v7 angular.json or custom-webpack.config.js?

Question

@angular/cli@7+ allows a customWebpackConfig to be specified to provide custom webpack configuration, such as:

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

This file then technically allows you to prepend, append or replace any portion of the webpack configuration. Prior to upgrading to @[email protected] and @angular/[email protected] we had ejected the webpack configuration to make some additions. One such addition was the postcss-momentum-scrolling postcss-loader plugin that automatically enabled iOS momentum scrolling on all scrollable containers.

I am seeking support on figuring out how to generate the necessary custom webpack code to load this plugin via the supported customizations allowed by @angular/cli@7+.

Here is a sample of what I have tried in my custom-webpack.config.js file:

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

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

As soon as I touch the scss chunk of the webpack config, it seems to do a replace instead of a merge or prepend, breaking the build.

I am wondering if anyone has a guide or suggestions on how to see what the initial webpack configuration that @angular/cli generates that is the starting point for modifications and a way to preview/peek at the code to be executed as debugging.

Also, an example of a similar customization would be great.

Thanks!

Answer 1

I think you need to tell to "customWebpackConfig" which portion to merge. Like this:

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

In this way you're going to tell to merge with prepend strategy. According to "custom-webpack" documentation it should default to "append" which doesn't seem the case in your example.

It's been a while since you've put the question but I wanted to actually ask if you have been able to fix it since I'm running in some issues getting my "module.rules" merged...it seems to work only if I set "replace" strategy.