Я думаю, что у меня может быть что-то здесь, это решение, которое я принял после некоторого возвращения с командой NRWL.
Я создаю рабочее пространство NX, сначала создав проект с угловым CLI, а затем добавив расширения, например, так:
- ng новый myproject (cd в корень myproject)
- ng add @ nrwl / workspace
Кроме того, по состоянию на сегодня (10 июля 2019 г.) я сообщил об ошибке, хотя рабочее пространство уже является угловым типом и@nrwl install распознает, что и устанавливает @ nrwl / angular, неправильно конфигурирует коллекцию схем по умолчанию, что означает, что команды «ng» не будут выполняться без добавления «@ nrwl / angular:» перед командой (например, «ng @nrwl»)./ angular: данный модуль mymod ").Поэтому вам нужно запустить установку (выберите scss и любой другой желаемый e2e):
Он скажет вам @ nrwl /angular уже установлен, но изменит конфигурационные файлы, чтобы он распознал angular как набор схем по умолчанию, и ваши команды ng будут работать, как и ожидалось, снова.
Это для рабочей области.Теперь создайте lib:
- ng g lib scss --directory = stylesheets
Это поместит библиотеку с именем scss в libs-> stylesheets.В каталоге "lib" этой библиотеки выведите все ваши файлы scss.Мы предполагаем, что вы поместили файл "variables.scss" в этот каталог lib.
То, что это делает, это пара вещей:
- Когда вы создали библиотеку, запись «пути» добавляется в вашу конфигурацию репо.Это позволяет вам использовать ресурсы в библиотеке, используя этот путь вместо длинного относительного импорта.Обратите внимание, что простое добавление этой записи и попытка импортировать файлы scss в другие файлы scss без оболочки библиотеки не работает.Очевидно, вам нужна эта библиотека, чтобы разрешить этот путь.
Если вы посмотрите, вы увидите, что запись "paths" выглядит примерно так:
"@ nameofrepo-nameoflib "
Чтобы использовать ресурсы scss в библиотеке, в angular.json, вы должны вручную (не идеально, но он есть) добавить следующий фрагмент к" build.options "раздел КАЖДОГО И КАЖДОГО ПРОЕКТА, В КОТОРОМ ВЫ ХОТИТЕ ЕГО ИСПОЛЬЗОВАТЬ.
Итак, если у вас есть десять проектов, у каждого будет запись проекта в angular.json, каждый из которых будет иметь сборку.блок опций (обычно заканчивающийся "scripts []", по крайней мере, в моей ванильной установке), и вы должны добавить это в каждый из этих разделов опций (эта информация есть, но я хотел подтвердить, это прямо изКоманда NRWL):
</p>
<pre><code>"stylePreprocessorOptions": {
"includePaths": ["libs/stylesheets/scss/src/lib"]
},
"extractCss": true
Теперь предположим, что вы создали приложение и добавили вышеуказанный конфиг к записи в angular.json:
нг г приложение myapp
И что в этом приложении вы создалифункциональный модуль и компонент:
(перейдите в apps / myapp / src)
ng g модуль myfeature ng g компонент myfeature
, который создаст папку модуля и компонента и активыи т. д.
ПРИМЕЧАНИЕ. На ту же дату, что и выше, существует проблема, заключающаяся в том, что при непосредственном создании компонента таким способом создается файл .css, даже если .scss является выбранным типом для проекта.Убедитесь, что вы переименовали этот файл и изменили указатель компонента на него.
В myfeature.component.scss вы бы импортировали "variables.scss" из вашей библиотеки следующим образом:
@import "variable"
Обратите внимание, что здесь нет "~" (которое разрешается в node_modules).И, если у вас есть подкаталоги в каталоге "lib" (например, utils), просто укажите путь к нему, как вы ожидаете:
@ import "utils / somefile"
Снова... вы ДОЛЖНЫ настроить параметры препроцессора, как указано в КАЖДОЙ записи проекта в angular.json!
Другой вопрос: эти пути могут отображаться или не отображаться в вашей среде IDE. Странно, но некоторые это делают, а некоторые нет.Не совсем уверен в паттерне здесь, но имейте в виду, что ваша IDE может показывать ошибку, если технически ее нет.
Это хорошо работает для моих проектов.