Импорты 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. Can't set breakpoints in VS Code

Вариант решения проблемы, когда не срабатывают точки остановки при разработке Angular приложений в редакторе VS Code
10 апреля 2018 г. в Angular

Переиспользуемые анимации в Angular

Для создания анимации используется функция animation(). Для её использования — useAnimation(). Приводится пример переиспользуемой анимации, а также создание анимации через литерал объекта.

09 октября 2018 г. в Angular