Угловая пользовательская конфигурация веб-пакета включает модули CSS

Question

Я пытаюсь применить концепцию модулей CSS к моему угловому приложению, чтобы упорядочить внедрение его в существующий интерфейс с CSS, который, к сожалению, частично совпадает. Мой проект использует scss, я хочу, чтобы веб-пакет "модулировал" мой CSS после CSS, если он был сформирован из scss на последнем этапе сборки.

Я хочу использовать загрузчик CSS веб-пакета для достижения этой цели.
Но я не мог заставить его работать.

https://www.npmjs.com/package/@angular-builders/custom-webpack, чтобы заказать настроить мой конфиг веб-пакета. Я попытался применить следующую конфигурацию

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

и получил эту ошибку

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);

Я пытался найти и добавить загрузчик css в существующий

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;
};

Получение той же ошибки. Как заставить это работать?

Обновление 1:

Я обнаружил, что angular использует postcss, который также предоставляет эту функцию в качестве плагина postcss-модулей. Также до сих пор не могу заставить его работать.