Angular custom webpack config enable CSS modules

I’m trying to apply CSS modules concept agains my angular app, to order embed it into existing frontend with CSS which unfortunately overlaps. My project uses scss, I want webpack “modulize” my CSS after CSS if formed from scss on last build step I think.

I want to use CSS loader of webpack to achieve this.
But I couldn’t make it work.

https://www.npmjs.com/package/@angular-builders/custom-webpack
to order customize my webpack config.
I’ve tried to apply the next configuration

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/i,
        loader: 'css-loader',
        options: {
          modules: true,
        },
      },
    ],
  },
};

and got this error

ERROR in Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../../../../css-loader/dist/runtime/api.js")(false);

I’ve tried to find and add css loader into existing

module.exports = (config, options) => {

  const rules = config.module.rules || [];
  rules.forEach(rule => {
    if (String(rule.test) === String(/.css$/)) {

      rule.use.push({ loader: 'css-loader', options: { modules: true }})

    }
  });
  return config;
};

Getting the same error. How to make it work?

Update 1:

I found that angular uses postcss which also provides this functionality as a plugin, postcss-modules. Also still can’t make it work.