css - angular ビルドで追加の CSS ファイルをビルドする

Question

バックグラウンド

@angular-builders/custom-webpackangularビルドのwebpack構成をカスタマイズできます。チュートリアルはこちら。これを使用して、Web 拡張 (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し、Angular ビルド アーティファクトfill-manager.jsと一緒に出力します。site-bridge.jsこの webpack 構成は angular の webpack 構成とマージされるため、単一のangular.jsonファイルからすべての最適化、ハッシュ、ソース マップなどを制御できます。

問題

また、拡張スクリプトで使用され、angular ビルドによって制御される追加の css ファイルをバンドルしたいと考えています。

特定のルール、ローダーなどを追加できるかもしれませんがextra.webpack.config.js、postcss、autoprefixer、sass loader などは既に 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、angular に基づく構成を使用してバンドルされた css ファイルを出力する方法はありますか?