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

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

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

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

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

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

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

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

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

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

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

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

Видите ../../../stylings/? Нравится?

Представьте, что ../../../stylings/ нужно повторно дописать в десятках/сотнях других компонентов, и вам нужно запоминать разные относительные пути. Не круто, давайте поправим!

Сокращение с помощью настройки Angular CLI

Если проект сгенерирован через Angular CLI, то можно добавить конфигурацию stylePreprocessorOptions > includePaths в файл .angular.cli.json. Эта конфигурация позволяет добавить дополнительные базовые пути, которые будут проверяться при импорте. Конфигурация говорит Angular CLI искать файлы стилей в вышеупомянутых папках перед обработкой всех файлов стилей компонента.

Например, давайте в пути добавим ./stylings. Конфигурация принимает массив, поэтому можно добавить несколько путей.

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

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

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

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

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

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

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

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

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

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

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

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

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

Почему же!

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

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

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

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

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

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

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

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

А что с подключением папок в node_modules?

Конфигурация Angular CLI применима к файлам в node_modules. Скажем, вы используете кастомный стилевой npm пакет, например, модуль bootstrap-sass.

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

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

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

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

Заключение

Давайте сотрем этот ад из относительных путей (../../../) с помощью конфигурации Angular CLI! Вот и все, хорошо покодить!

Автор: Jecelyn Yeen

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

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

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

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

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

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

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

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree