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

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

1 голос
/ 25 марта 2019

Фон

@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 в комплекте, используя конфигурацию, основанную на angular?

...