Angular – скорочення для імпорту файлів стилів компоненти

11

Від автора: у звичайному проекті на Angular компоненти присутні у великій кількості. У всіх компонентів свої стилів (css, scss, less тощо). Найчастіше в компонент потрібно підключити файли глобальних стилів (особливо файл змінних).

Ми обговорювали цю тему в іншій статті по стилям в Angular: використання Sass з допомогою Angular CLI. Давайте познайомимося з іншою думкою з приводу імпорту файлів стилів:

Зразок змінних Sass

Angular – скорочення для імпорту файлів стилів компоненти

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

Посилання на файл змінних

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

Hello World!

Змінна $brand-color зберігається у файлі stylings/_variables.scss. Щоб використовувати цю змінну, необхідно імпортувати файл:

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

Перезапустіть сервер. Почекайте, і ви повинні отримати… помилку!

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! Ось і все, добре покодить!