Angular – сокращение для импорта файлов стилей в компоненты

Angular – сокращение для импорта файлов стилей в компоненты

От автора: в обычном проекте на Angular компоненты присутствуют в большом количестве. У всех компонентов свои стили (css, scss, less и т.д.). Зачастую в компонент требуется подключить файлы глобальных стилей (особенно файл переменных).

Мы обсуждали эту тему в другой статье по стилям в Angular: использование Sass с помощью Angular CLI. Давайте познакомимся с другим мнением по поводу импорта файлов стилей:

Образец переменных Sass

Angular – сокращение для импорта файлов стилей в компоненты

// your _variables.scss file
$brand-color: #800000;

Ссылка на файл переменных

Ниже представлен файл hello.component.html. Давайте стилизуем хедер нашим brand-color.

<!-- hello.component.html -->
<h1>
  Hello World!
</h1>

Переменная $brand-color хранится в файле stylings/_variables.scss. Чтобы использовать эту переменную, необходимо импортировать файл:

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
// 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. Конфигурация принимает массив, поэтому можно добавить несколько путей.

{
 ...
 "apps": [{
 "root": "src",
 ...
 "stylePreprocessorOptions": {
 "includePaths": [
 "./stylings"
 ]
 }

 }]
}

Теперь мы можем обновить наш hello.component.scss до просто @import «variables». Замечательно!

// hello.component.scss
@import "variables"; // change to just variables, say goodbye to ../../../stylings/

h1 {
 color: $brand-color;
}

А что если имена файлов в папках дублируются?

Представьте, что вы подключили два пути к стилям в .angular.cli.json. В обеих папках есть файл _variables.scss. Как думаете, что будет? CLI подхватит оба файла или выбросит ошибку?

Давайте проверим!

Angular – сокращение для импорта файлов стилей в компоненты

В stylings2/_variables.scss следующие стили:

// stylings2/_variables.scss
$brand-color: blue;
$font-size-large: 40px;

Обновите конфигурации .angular.cli.json и подключите папку styling2.

{
 ...
 "apps": [{
 "root": "src",
 ...
 "stylePreprocessorOptions": {
 "includePaths": [
 "./stylings",
 "./stylings2"
 ]
 }

 }]
}

Обновите файл hello.component.scss

// hello.component.scss
@import "variables";

h1 {
 color: $brand-color;
 font-size: $font-size-large;
}

Перезапустите сервер. Подождите, и вы должны получить… ошибку!

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular – сокращение для импорта файлов стилей в компоненты

Почему же!

Оказывается, если есть несколько одинаковых файлов, Angular CLI возьмет только первый. В нашем случае берется файл stylings/_variables.scss. Вот почему нет переменной $font-size-large, потому что она лежит в файле styling2/_variables.scss.

Но… мне нужны два файла с одинаковыми именами!

Бывают случаи, когда действительно нужны файлы с одинаковыми именами, и вам хотелось бы иметь сокращения. В качестве решения можно подключить родительский путь. Например, у папок stylings и stylings2 есть общая папка src.

Конфигурацию .angular.cli.json можно обновить:

{
 ...
 "apps": [{
 "root": "src",
 ...
 "stylePreprocessorOptions": {
 "includePaths": [
 "."
 ]
 }

 }]
}

Затем в hello.component.scss можно ссылаться на обе переменные:

// hello.component.scss
@import "stylings/variables";
@import "stylings2/variables"; 

h1 {
 color: $brand-color;
 font-size: $font-size-large;
}

Не идеально, чуть-чуть больше букв, но лучше чем ../../../, правда? Тем не менее, сценарий, когда необходимы файлы стилей с одинаковыми именами, очень редкий.

Другой обходной путь покороче – подключить родительскую папку и одну папку стилей:

{
 ...
 "apps": [{
 "root": "src",
 ...
 "stylePreprocessorOptions": {
 "includePaths": [
 ".",
 "./stylings"
 ]
 }

 }]
}

Можете сэкономить пару строк в hello.component.scss.

// 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.

npm install bootstrap-sass --save

Структура папок bootstrap-sass:

Angular – сокращение для импорта файлов стилей в компоненты

Например, вы захотели использовать BootStrap файл _variables.scss. Для этого вы можете обновить файл .angular.cli.json и подключить папку к BootStrap:

{
 ...
 "apps": [{
 "root": "src",
 ...
 "stylePreprocessorOptions": {
 "includePaths": [
 ".",
 "./stylings",
 "../node_modules/bootstrap-sass/assets/stylesheets"
 ]
 }

 }]
}

Затем в hello.component.scss на переменные BootStrap можно ссылаться так:

// 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

Источник: https://scotch.io/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree