Как использовать любой CSS-фреймворк в вашем проекте

Узнайте, как структурировать ваши SCSS-файлы и использовать переменные Bootstrap по всему Angular-проекту для масштабируемых и настраиваемых дизайн-систем.

В предыдущей части мы рассмотрели, как настроить UI-библиотеку в проекте, используя Bootstrap в качестве примера. Результатом стал новый проект Angular с установленным пакетом NG Bootstrap и возможностью добавлять или удалять выбранные компоненты.

Структура ваших стилей

Обычно я использую следующую структуру глобальных стилей в проекте. Такой подход обеспечивает гибкую, читаемую и легкую в поддержке систему стилей — что критично для крупных проектов, которые могут длиться месяцами или даже годами:

/src
  /styles
    /common
    /components
    /forms
    /mixins
    /variables
    /vendor
    ├── app.scss
    ├── vendor.scss
  styles.scss

Разберём каждую папку:

Common: содержит типографику, подключённые шрифты, иконки и базовые стили, используемые по всему проекту (например, container.scss или helpers.scss).
Components: хранит стили, относящиеся к конкретным компонентам.
Forms: включает стили для элементов форм, которые требуют дополнительной кастомизации помимо того, что можно сделать с помощью переменных Bootstrap.
Mixins: содержит миксины для переиспользуемых паттернов. Папка необязательна, если вы не используете их.
Variables: хранит переменные Bootstrap и любые другие переменные, необходимые для проекта.
Vendor: содержит измененные компоненты Bootstrap, которые нельзя настроить только через переменные.

Мы подробно рассмотрим каждую из них в следующих статьях. Пока все папки, кроме variables, следует оставить пустыми.

Переменные Bootstrap

Ключевая часть нашей настройки — файл с переменными Bootstrap. Как и многие другие CSS-фреймворки, Bootstrap имеет большое количество внутренних переменных, которые являются фундаментом их дизайн-системы. Это позволяет кастомизировать множество элементов без написания дополнительного CSS-кода. Файл с переменными содержит более 1000 значений для компонентов, что позволяет гибко их изменять.

Пример — фрагмент с настройками стилей кнопок. Здесь можно кастомизировать цвета, отступы, размеры шрифта и другие параметры:

// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.

// scss-docs-start btn-variables
$btn-color:                   var(--#{$prefix}body-color) !default;
$btn-padding-y:               $input-btn-padding-y !default;
$btn-padding-x:               $input-btn-padding-x !default;
$btn-font-family:             $input-btn-font-family !default;
$btn-font-size:               $input-btn-font-size !default;
$btn-line-height:             $input-btn-line-height !default;
$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
$btn-font-size-sm:            $input-btn-font-size-sm !default;

$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
$btn-font-size-lg:            $input-btn-font-size-lg !default;

$btn-border-width:            $input-btn-border-width !default;

Добавление переменных Bootstrap в проект

Чтобы использовать переменные Bootstrap, скопируйте файл _variables.scss из пакета Bootstrap:

/node_modules/bootstrap/scss/_variables.scss

Переименуйте его и поместите в:

/src/styles/variables/_bootstrap.scss

Важный момент: удалите все флаги !default после копирования файла. Эти флаги мешают перезаписыванию переменных и не дадут вашим изменениям вступить в силу. Подробнее об этом можно прочитать в официальной документации Sass.

Далее обновите vendor.scss:

...
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
// @import 'bootstrap/scss/variables-dark';
@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/utilities';

// custom variables
@import 'variables/_bootstrap';
...

Таким образом, мы сначала импортируем дефолтные переменные Bootstrap, чтобы сохранить совместимость с будущими версиями, а затем импортируем собственный файл _bootstrap.scss для их переопределения.

Кастомизация переменных Bootstrap

Давайте попробуем поменять основной цвет проекта. В файле _bootstrap.scss измените следующее:

...
$primary: $red; // поменяйте значение с $blue на $red 
$secondary: $gray-600;
$success: $green;
...

Теперь фон кнопки Primary поменялся с синего на красный без дополнительных стилей. Более того, вся дизайн-система поменялась соответствующе — обновились состояния кнопок hover, active, disabled, а также все компоненты Bootstrap (input, checkbox, datepicker и др.), которые используют переменную $primary.

Стили компонентов Angular

В Angular каждый компонент может иметь не только HTML-шаблон, но и собственные CSS-стили, написанные на SCSS или LESS. Стили, определённые в файле компонента, применяются только к нему и не влияют на глобальные стили или другие страницы.

Однако, при построении дизайн-системы важно переиспользовать SCSS-переменные по всему проекту. В нашем случае важно, чтобы переменные Bootstrap были доступны внутри стилей компонентов. Это позволит менять внешний вид проекта через переменные, а не писать новый CSS-код.

Для этого импортируйте файл с переменными в SCSS-файл компонента:

@import 'variables/bootstrap';

// вы можете использовать переменные Bootstrap внутри своего компонента
.hero {
  background-color: $primary;    
  color: $white;    
  padding: 20px;
}

Чтобы не использовать относительные пути при импортах, обновите angular.json:

"build": {  
  ...  
  "options": {    
    ...    
    "stylePreprocessorOptions": {      
      "includePaths": [        
        "src/styles/"      
      ],    
    }    
    ...  
  }
}

Теперь обновите styles.scss:

@import 'vendor.scss';
@import 'app.scss';

После этого вы сможете использовать переменные Bootstrap в любом Angular-компоненте без указания относительных путей.

Использование того же подхода в NX

Для проектов, использующих архитектуру NX, настройка похожа, но с некоторыми нюансами. Вместо хранения стилей в папке приложения, создайте отдельную общую библиотеку для стилей и обновите project.json.

NX — это мощный монорепозиторный фреймворк для управления несколькими приложениями в одном репозитории. Он предоставляет инструменты для шаринга кода, оптимизированной сборки и модульной архитектуры, что делает его отличным выбором для крупных проектов Angular.

"build": {  
  ...  
  "options": {    
    ...    
    "stylePreprocessorOptions": {      
      "includePaths": [        
        // ui-styles — название библиотеки со стилями        
        "libs/ui-styles/src/lib"      
      ],    
    }    
    ...  
  }
}

Таким образом, стили и переменные можно переиспользовать в нескольких приложениях или библиотеках внутри рабочего пространства NX.

Заключение

В этой статье мы рассмотрели, как использовать переменные Bootstrap в вашем проекте. В итоге, вы получили:

Структурированный подход к организации стилей.
Единый файл для управления переменными Bootstrap, упрощающий кастомизацию.
Возможность использовать Bootstrap-переменные внутри стилей компонентов Angular.

В следующей статье мы поговорим о работе с цветовыми палитрами и о том, как поддерживать единую цветовую систему в проекте. Следите за обновлениями!

Как использовать любой CSS-фреймворк в вашем проекте — Часть 2