Від автора: у звичайному проекті на Angular компоненти присутні у великій кількості. У всіх компонентів свої стилів (css, scss, less тощо). Найчастіше в компонент потрібно підключити файли глобальних стилів (особливо файл змінних).
Ми обговорювали цю тему в іншій статті по стилям в Angular: використання Sass з допомогою Angular CLI. Давайте познайомимося з іншою думкою з приводу імпорту файлів стилів:
Зразок змінних Sass
// 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 підхопить обидва файлу або викине помилку?
Давайте перевіримо!
У 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 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:
Наприклад, ви захотіли використовувати 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! Ось і все, добре покодить!
