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

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

let-* $implicit in Angular template

Синтаксис let-* позволяет объявить переменную в шаблоне <ng-template>, использования ключа $implicit позволяет устанавливать значение по-умолчанию для объявленной переменной.

29 августа 2018 г. в Angular

Angular dependency injection

Определение Provider (useClass, useValue, useFactory ), Injector. Декоратор @Inject, ключ multi: true

13 ноября 2018 г. в Angular

Об subscribe() vs async

О предпочтительности использования async pipe. При OnPush стратегии не требуется вызывать markForCheck() внутри подписки +решение с несколькими | async pipes развёрнутых в одну переменную (внутри шаблона).

06 января 2019 г. в Angular