Как управлять таблицами стилей SCSS в монорепозитории с разными переменными, разделяющими библиотеки?

Думаю, у меня здесь что-то есть, это решение, которое я принял после некоторого разговора с командой NRWL.

Я создаю рабочее пространство NX, сначала создавая проект с помощью angular CLI, а затем добавляя расширения, например:

• нг новый мойпроект (cd в корень myproject)
• нг добавить @ nrwl / workspace

Кроме того, на сегодняшний день (10 июля 2019 г.) я сообщил об ошибке, что, хотя рабочая область уже имеет тип angular, а установка @nrwl распознает это и устанавливает @ nrwl / angular, она неправильно настраивает значение по умолчанию. schematics, что означает, что команды «ng» не будут выполняться без добавления «@ nrwl / angular:» перед командой (например, «ng @ nrwl / angular: g module mymod»). Итак, вам нужно запустить установку (выберите scss и любой другой бегунок e2e, который вы хотите):

• нг добавить @ nrwl / angular

Он сообщит вам, что @ nrwl / angular уже установлен, но изменит файлы конфигурации, чтобы распознать angular как коллекцию схем по умолчанию, и ваши команды ng снова будут работать, как ожидалось.

Вот и все по рабочему пространству. Теперь создайте библиотеку:

• ng g lib scss --directory = таблицы стилей

Это поместит библиотеку с именем scss в libs-> таблицы стилей. В каталоге "lib" этой библиотеки сделайте дамп всех ваших файлов scss. Предположим, вы поместили файл "variables.scss" в этот каталог lib.

Это делает несколько вещей:

• Когда вы создали библиотеку, в вашу конфигурацию репозитория добавляется запись «paths». Это позволяет вам использовать ресурсы в библиотеке, используя этот путь вместо длинного относительного импорта. Обратите внимание, что просто добавить эту запись и попытаться импортировать файлы scss в другие файлы scss без оболочки библиотеки не работает. Очевидно, вам нужна эта библиотека, чтобы разрешить этот путь.

Если вы посмотрите, то увидите, что запись «paths» выглядит примерно так:

"@ nameofrepo-nameoflib"

Чтобы использовать ресурсы scss в библиотеке в angular.json, вам нужно вручную (не идеально, но он есть) добавить приведенный ниже фрагмент в раздел build.options КАЖДОГО И КАЖДОГО ПРОЕКТА, КОТОРЫЙ ВЫ ХОТИТЕ ИСПОЛЬЗОВАТЬ. В.

Итак, да, если у вас десять проектов, каждый будет иметь запись проекта в angular.json, каждый из них будет иметь блок build.options (обычно оканчивающийся на «scripts []», по крайней мере, в моей ванильной установке), и вы нужно добавить это в каждый из этих разделов опций (эта информация там есть, но я хотел подтвердить, что это прямо от команды NRWL):

"stylePreprocessorOptions": {
    "includePaths": ["libs/stylesheets/scss/src/lib"]
},
"extractCss": true

Теперь предположим, что вы создали приложение и добавили указанную выше конфигурацию в запись в angular.json:

приложение ng g myapp

И что в этом приложении вы создали функциональный модуль и компонент:

(cd в apps / myapp / src)

моя функция модуля ng g компонент ng g myfeature

Это создаст папку с модулем и компонентом, активы и т. д.

ПРИМЕЧАНИЕ. По состоянию на ту же дату, что и выше, существует проблема, заключающаяся в том, что при непосредственном создании компонента таким образом создается файл .css, даже если для проекта выбран тип .scss. Убедитесь, что вы переименовали этот файл и изменили на него указатель компонента.

В myfeature.component.scss вы должны импортировать "variables.scss" из своей библиотеки следующим образом:

@import "переменные"

Обратите внимание, что нет символа "~" (который разрешается в node_modules). И, если у вас есть подкаталоги в каталоге "lib" (например, utils), просто укажите путь к нему, как и следовало ожидать:

@import "utils / somefile"

Опять же ... вы ДОЛЖНЫ настроить параметры препроцессора, как указано в КАЖДОЙ записи проекта в angular.json!

Еще одна проблема: эти пути могут или не могут показаться разрешенными в вашей среде IDE. Как ни странно, кажется, что некоторые делают, а некоторые нет. Не совсем уверен в шаблоне здесь, но имейте в виду, что ваша IDE может показывать ошибку там, где ее технически нет.

Это хорошо работает для моих проектов.