Сборка дополнительного CSS-файла в угловой сборке

Question

Фон

@angular-builders/custom-webpack позволяет нам настроить конфигурацию веб-пакета угловой сборки, учебник здесь. Я использую его для создания дополнительных скриптов для веб-расширения (Chrome/Firefox).

Здесь extra.webpack.config.js что я включил в angular.json

const { resolve } = require('path');

const scriptsDir = __dirname;

module.exports = {
  entry: {
    "background-script": resolve(scriptsDir, 'background-script/boot.ts'),
    "fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts')],
    "site-bridge": resolve(scriptsDir, 'site-bridge/boot.ts')
  }
};

Как и ожидалось, это выводит background-script.js, fill-manager.js а также site-bridge.js наряду с угловатыми артефактами. Поскольку эта конфигурация веб-пакета объединена с конфигурацией веб-пакета angular, мы можем контролировать все оптимизации, хеширование, исходные карты и т. Д. Из одного angular.json файл.

проблема

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

Я мог бы добавить определенные правила, загрузчики и т. Д. extra.webpack.config.js но я не хочу иметь дело с postcss, autoprefixer и sass loaders и т. д., поскольку это уже делается внутри angular.

Так же, как файлы сценариев, просто добавив запись CSS внутри extra.webpack.config.js не производит файл CSS, т.е.

module.exports = {
  entry: {
    ...
    "fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts'), resolve(scriptsDir, 'fill-manager/main.css')],
    ...
  }
};

Есть ли способ, где я могу указать запись файла CSS / SCSS в extra.webpack.config.js и он просто выводит связанный CSS-файл, используя конфигурацию, основанную на угловых?