Импорты 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;
}

Похожие записи

Angular. Когда не надо отписываться в RxJS?

В async pipe за вас отпишется Angular. Во всех остальных случаях лучше отписываться самостоятельно. Допускается не отписываться в потоках, где будет гарантировано вызван complete.

Angular routerLink conditionally

<a [routerLink]="myVar ? '/home' : null" routerLinkActive="is-active">Home</a>
or
<a [routerLink]="myVar ? ['/home'] : []">Home</a>