угловой 2, угловой-cli: как включить относительные пути для стилуса?

Question

В качестве отправной точки для порта нашего углового 1.5 приложения к угловой 2, я создал шаблон проекта с угловым-кли:

ng new pd --style=styl 

Stylus компиляция прекрасно работает в принципе, но использует абсолютные пути.

Мой глобальный стилус файл (style.styl) выглядит

@require "~@mgm-a12/plasma-design/stylus/plasma.styl" 

Это «plasma.styl» является точкой входа (для всей компании стилей) и использует относительные пути, например (два «@ требует»глубоко от plasma.styl):

background url("../assets/img/sprite.png") no-repeat 

, когда я пытаюсь построить, я получаю эту ошибку:

ModuleNotFoundError: Module not found: Error: Can't resolve 
'../assets/img/sprite.png' 
in '.../pd/src' 
at .../pd/node_modules/webpack/lib/Compilation.js:229:38 

(так пытается разрешить URL-адрес, основанный на пути глобального stylus.styl, который является неправильным)

Принятый здесь ответ Webpack && stylus-loader incorrectly resolve url paths говорит, что нужно добавить «разрешить URL» в параметры загрузчика стилуса.

Но где я могу добавить эту опцию в файлы, созданные угловым кли?

Answer 1

Погрузчики для веб-погрузчиков сконфигурированы внутри углового кли. Большинство из них содержатся в /angular-cli/models/webpack-build-common.js При изменении строки в этом файле из

loaders: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader'] 

в

loaders: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader?resolve url'] 

он работает отлично.

Конечно, это не жизнеспособное решение (потому что для моего проекта этот файл конфигурации является временным файлом внутри папки node_modules).

К сожалению угловой кли (намеренно) не обеспечивает способ настройки конфигурации WebPack: https://github.com/angular/angular-cli/issues/1656#issuecomment-239366723

В качестве обходного пути я добавил код в НОМ сценарий моего package.json, что копирует активы из ссылочного папки стилуса на мой проект (только для того, чтобы импорт работал). Но поскольку это была не единственная проблема, с которой мы столкнулись с angular-cli, в любом случае нам нужно быстро перейти на собственную сборку webpack.