Как styles.scss увидеть из любой части приложения?

Question

[zlodiak]

Для объединения нескольких angular-проектов в один используется NX. В нём имеется глобальный файл стилей styles.scss. он находится в следующем месте дерева каталогов:

apps
	appName
		src
			styles.scss
libs
	lib1
	lib2
	lib3

Проблема в том, что стили из styles.scss видны только из любого места внутри каталога apps. А мне хотелось бы чтобы они были видны для любого места в каталоге libs тоже. Посоветуйте пожалуйста как это сделать

Comments

[Pavel Pikat]

Коду чхать на стуктуру ваших папок. У вас скорее всего в остальных проектах в libs эти самые стили нигде не используется. Загляните в angular.json что-ли

[zlodiak]

Pavel Pikat, если бы они не использовались, то я не обнаружил бы проблему

[Pavel Pikat]

zlodiak, я имел ввиду что они не подключены через styles в angular.json

[zlodiak]

Pavel Pikat, вроде подключены так:

"styles": [
  "apps/bla/src/styles.scss"
],

При этом когда я пробую использовать переменную, содержащую код цвета внутри apps так:
body { background: $red-color; }
, то всё ок. Но если этот код переношу в любой файл внутри каталога libs, то в консоль выводится ошибка с сообщением о том, что интерпретатор не может распознать это место.

Сам понимаю, что это чертовщина и всё должно работать. Но вот не работает

[Игорь]

@import "путь до стиля"

[Антон Швец]

zlodiak, не должно. для использования переменных нужно явно импортировать scss в стилях компонента

Answer 1

[Александр Семенов]

Вам нужно указать директорию куда необходимо смотреть ангуляр проекту, то есть для каждого проекта нужно в файле angular.json дополнить настройки, а именно добавить stylePreprocessorOptions:

...
"projects": {
   "app_name": {
       .....
       "architect": {
           "build": {
              ....
                 "options": {
                   ....
                    "stylePreprocessorOptions": {
                          "includePaths": ["apps/appName/src/", "apps/themes/"]
                     },
                  }
             }
         }
    }
}