От автора: в обычном проекте на Angular компоненты присутствуют в большом количестве. У всех компонентов свои стили (css, scss, less и т.д.). Зачастую в компонент требуется подключить файлы глобальных стилей (особенно файл переменных).
Мы обсуждали эту тему в другой статье по стилям в Angular: использование Sass с помощью Angular CLI. Давайте познакомимся с другим мнением по поводу импорта файлов стилей:
Образец переменных Sass
|
1 2 |
// your _variables.scss file $brand-color: #800000; |
Ссылка на файл переменных
Ниже представлен файл hello.component.html. Давайте стилизуем хедер нашим brand-color.
|
1 2 3 4 |
<!-- hello.component.html --> <h1> Hello World! </h1> |
Переменная $brand-color хранится в файле stylings/_variables.scss. Чтобы использовать эту переменную, необходимо импортировать файл:
|
1 2 3 4 5 6 |
// hello.component.scss @import "../../../stylings/variables"; // this is not cool! h1 { color: $brand-color; } |
Видите ../../../stylings/? Нравится?
Представьте, что ../../../stylings/ нужно повторно дописать в десятках/сотнях других компонентов, и вам нужно запоминать разные относительные пути. Не круто, давайте поправим!
Сокращение с помощью настройки Angular CLI
Если проект сгенерирован через Angular CLI, то можно добавить конфигурацию stylePreprocessorOptions > includePaths в файл .angular.cli.json. Эта конфигурация позволяет добавить дополнительные базовые пути, которые будут проверяться при импорте. Конфигурация говорит Angular CLI искать файлы стилей в вышеупомянутых папках перед обработкой всех файлов стилей компонента.
Например, давайте в пути добавим ./stylings. Конфигурация принимает массив, поэтому можно добавить несколько путей.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ ... "apps": [{ "root": "src", ... "stylePreprocessorOptions": { "includePaths": [ "./stylings" ] } }] } |
Теперь мы можем обновить наш hello.component.scss до просто @import «variables». Замечательно!
|
1 2 3 4 5 6 |
// hello.component.scss @import "variables"; // change to just variables, say goodbye to ../../../stylings/ h1 { color: $brand-color; } |
А что если имена файлов в папках дублируются?
Представьте, что вы подключили два пути к стилям в .angular.cli.json. В обеих папках есть файл _variables.scss. Как думаете, что будет? CLI подхватит оба файла или выбросит ошибку?
Давайте проверим!
В stylings2/_variables.scss следующие стили:
|
1 2 3 |
// stylings2/_variables.scss $brand-color: blue; $font-size-large: 40px; |
Обновите конфигурации .angular.cli.json и подключите папку styling2.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ ... "apps": [{ "root": "src", ... "stylePreprocessorOptions": { "includePaths": [ "./stylings", "./stylings2" ] } }] } |
Обновите файл hello.component.scss
|
1 2 3 4 5 6 7 |
// hello.component.scss @import "variables"; h1 { color: $brand-color; font-size: $font-size-large; } |
Перезапустите сервер. Подождите, и вы должны получить… ошибку!
Почему же!
Оказывается, если есть несколько одинаковых файлов, Angular CLI возьмет только первый. В нашем случае берется файл stylings/_variables.scss. Вот почему нет переменной $font-size-large, потому что она лежит в файле styling2/_variables.scss.
Но… мне нужны два файла с одинаковыми именами!
Бывают случаи, когда действительно нужны файлы с одинаковыми именами, и вам хотелось бы иметь сокращения. В качестве решения можно подключить родительский путь. Например, у папок stylings и stylings2 есть общая папка src.
Конфигурацию .angular.cli.json можно обновить:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ ... "apps": [{ "root": "src", ... "stylePreprocessorOptions": { "includePaths": [ "." ] } }] } |
Затем в hello.component.scss можно ссылаться на обе переменные:
|
1 2 3 4 5 6 7 8 |
// hello.component.scss @import "stylings/variables"; @import "stylings2/variables"; h1 { color: $brand-color; font-size: $font-size-large; } |
Не идеально, чуть-чуть больше букв, но лучше чем ../../../, правда? Тем не менее, сценарий, когда необходимы файлы стилей с одинаковыми именами, очень редкий.
Другой обходной путь покороче – подключить родительскую папку и одну папку стилей:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ ... "apps": [{ "root": "src", ... "stylePreprocessorOptions": { "includePaths": [ ".", "./stylings" ] } }] } |
Можете сэкономить пару строк в hello.component.scss.
|
1 2 3 4 5 6 7 8 |
// hello.component.scss @import "variables"; // shorter, don't need styling/ as it's one of the configured paths @import "stylings2/variables"; h1 { color: $brand-color; font-size: $font-size-large; } |
А что с подключением папок в node_modules?
Конфигурация Angular CLI применима к файлам в node_modules. Скажем, вы используете кастомный стилевой npm пакет, например, модуль bootstrap-sass.
|
1 |
npm install bootstrap-sass --save |
Структура папок bootstrap-sass:
Например, вы захотели использовать BootStrap файл _variables.scss. Для этого вы можете обновить файл .angular.cli.json и подключить папку к BootStrap:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ ... "apps": [{ "root": "src", ... "stylePreprocessorOptions": { "includePaths": [ ".", "./stylings", "../node_modules/bootstrap-sass/assets/stylesheets" ] } }] } |
Затем в hello.component.scss на переменные BootStrap можно ссылаться так:
|
1 2 3 4 5 6 7 8 9 10 |
// hello.component.scss @import "variables"; @import "stylings2/variables"; @impoer "bootstrap/variables"; h1 { color: $brand-color; font-size: $font-size-large; font-family: $font-family-serif; } |
Заключение
Давайте сотрем этот ад из относительных путей (../../../) с помощью конфигурации Angular CLI! Вот и все, хорошо покодить!
Автор: Jecelyn Yeen
Источник: //scotch.io/
Редакция: Команда webformyself.
