Импорты scss в angular
Введение
Cтруктура папок проекта
src
app
app.component.ts
hello
hello.component.html
hello.component.scss
hello.component.ts
...
stylings
_variables.scssСодержимое _variables.scss
$brand-color: #800000;
...Импорт переменной в файле hello.component.scss
@import "../../stylings/variables"; // хочется более изящной записи
h1 {
color: $brand-color;
}Angular CLI SCSS imports
В проект созданный с помощью Angular CLI, вы можете добавить секцию stylePreprocessorOptions > includePaths с массивом путей, содержащих SCSS файлы в секцию projects > <имя_проекта> > architect > build > options конфигурационного файла angular.json. Эта конфигурация говорит Angular CLI искать файлы стилей по указанным путям перед обработкой каждого файла стиля компонента.
Размещение секции в angular.json файле
"styles": [
"src/styles.scss"
],
"stylePreprocessorOptions": { <====
"includePaths": [
"src/stylings"
]
},
"scripts": []После проделанной манипуляции импорты доступны в более изящной форме:
// hello.component.scss
@import "variables"; // вместо ../../stylings/variables
h1 {
color: $brand-color;
}