Импорты 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 URL Matcher

Функция сопоставления маршрута с URL-адресами. Возможность динамически подбирать компонент для маршрута

04 октября 2020 г. в Angular

Angular environment service

Использование сервиса для окружения вместо прямой ссылки на environment.ts

27 января 2020 г. в Angular

Вложенные формы Angular

Рассматриваются варианты встраивания форм, позволяющие переиспользовать набор полей вводе со своей логикой. @Input() родительской формы, @Output() дочерней формы, ViewChild(), ControlValueAccessor, ControlContainer