ONE DUDE`S BLOG

/media/1_VKY-Ldkt-iHobItql7G_5w.webp

Алиас для стилей angular2+

23.05.2020
Добавление алиаса для стилей в проекте ангуляра версии 2+, думаю, ни для кого не секрет чем череваты абсолютные пути, и почему это плохо...

Зачем это нужно?

Зачем нужно указывать алиас для общих стилей и переменных 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;
}
Angular 2+
scss
sass
3
534