add additional postcss loaders

Is your feature request related to a problem? Please describe. Would like to add additional postcss plugins via the new @angular/cli v7 angular.json or custom-webpack.config.js.

Describe the solution you’d like I would like to be able to add additional postcss plugins to the existing list that @angular/cli uses. I’m unsure if this is an undocumented or poorly understood feature, or not yet a feature. Please clarify.

Describe alternatives you’ve considered @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"
        },
        ...

This file then technically allows you to prepend, append or replace any portion of the webpack configuration. Prior to upgrading to @angular@7.1.3 and @angular/cli@7.1.3 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.

Is there 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 helpful.

Additional context Also started the discussion here last week: https://stackoverflow.com/questions/53955119/how-do-i-add-an-additional-postcss-plugin-via-the-new-angular-cli-v7-angular-js

[just-jeb]

Let’s try another direction. Leave your test as scss but change the merge strategy for loaders to prepend ('module.rules': 'prepend'). This theoretically should put your loader at the beginning of the rules array. Loaders are executed from right to left. So technically your loader will be the last loader applied. Again, I don’t remember exactly what are the regex tests they use inside Angular CLI so it might work in a different way.
Anyways, it would be very useful if you added here the resulting configuration you get (I understand that you managed to change the sources in order to print this configuration out).
Also, this is used for merging so it might help you in understanding how the loaders are merged.

Regarding your production approach - the right thing to do (until the pull request is merged) is to keep two different webpack configs and use configurations option in angular.json to specify the right one for the appropriate environment.

One more question. Are you trying to build in production mode or development? Because if it’s production then it completely does make sense that it won’t work without the extractCss=false. For the exact same reason it won’t work in tailwind.js thread. Although it might work with the prepend thing but I didn’t try.

[michaelcm]

Yes, back on this project now. Will get the example up here as soon as I confirm its the final working code.