
Алиас для стилей angular2+
Зачем это нужно?
Зачем нужно указывать алиас для общих стилей и переменных scss/sass? Думаю ответ очевиден, в зависимости от директории в которой вы импортируете scss/sass файл вам не захочется указывать относительный путь, да и абсолютный может выглядеть достаточно громоздко.
Как подключить?
Собственно, максимально просто. То малое усилие что требуется приложить сэкономит Вам уйму времени ;) топаем в angular.json, и добавляем пути в stylePreprocessorOptions
"architect": {
...
"build": {
...
"options": {
...
"stylePreprocessorOptions": {
"includePaths": ["./src/app/../COMMON_STYLE_FOLDER"]
},
}
}
}
Как использовать?
Чтобы использовать алиас достаточно добавить ./src/app/../COMMON_STYLE_FOLDER" необходимые вам scss/sass. Давайте создадим файл variables.scss со следующим содержимым
$rose: red;
Теперь перейдем в файл в котором нам нужно использовать данную переменную, например app.component.scss , в нем мы можем использовать относительный путь и переменную из скоупа variables.scss.
@import 'variables';
h1 {
color: $rose;
}