Узнайте, как интегрировать Bootstrap в Angular проект с использованием чистой и модульной SCSS структуры, поддерживающей простую кастомизацию и масштабируемость.

Design systems

Существует несколько способов подключить CSS-библиотеку к вашему проекту. Под «CSS-библиотекой» я имею в виду любой современный CSS-фреймворк или UI-библиотеку, например Bootstrap, NG-Zorro, PrimeNG и т. д. Хотя все эти методы рабочие, многие из них не обеспечивают достаточной гибкости или не позволяют глубоко настраивать выбранный фреймворк.

Чтобы построить надежную основу для вашей дизайн-системы и обеспечить простую кастомизацию в будущем, лучше использовать стили из исходного кода (файлы SASS или LESS) выбранного фреймворка, а не минифицированные версии. Такой подход обеспечивает более удобный рабочий процесс, уменьшает количество лишнего кода и увеличивает гибкость.

В этом гайде предполагается, что вы обладаете базовыми знаниями Angular и менеджеров пакетов, таких как Yarn или npm.

Для демонстрации мы будем использовать Bootstrap в качестве примера UI-библиотеки и Angular как фронтенд-фреймворк. Однако этот же подход применим практически к любой UI-библиотеке, так как все они следуют схожим принципам разработки.

Создание нового Angular проекта

Первый шаг — создать новое Angular приложение. Подробные инструкции есть в официальной документации, а тут перечислены основные команды (при условии, что используется менеджер Yarn):

yarn global add @angular/cli
ng new <project-name>

После выполнения будет создан новый проект в папке <project-name>.

Добавление Bootstrap

Далее нужно добавить библиотеку Bootstrap в проект. Существует несколько npm-пакетов, но мы будем использовать NG Bootstrap, так как это самая популярная версия для Angular (более чем 450 000 загрузок в неделю). Дополнительные инструкции можно найти на официальном сайте.

Чтобы добавить его в проект, выполните команду в папке проекта:

ng add @ng-bootstrap/ng-bootstrap

Модификация структуры

Теперь у нас есть Angular приложение с UI-библиотекой Bootstrap и нам необходимо немного оптимизировать конфигурацию:

1. Создайте новую папку /src/styles для хранения всех стилей проекта.

2. Добавьте в неё два новых файла: app.scss и vendor.scss. Разделение стилей на эти два файла позволяет хранить сторонние стили отдельно от пользовательских, что упрощает поддержку. Новая структура будет выглядеть так:

/src  
  /styles    
    ├── app.scss    
    ├── vendor.scss  
  styles.scss

3. Импортируйте созданные файлы в  /src/styles.scss:

@import "styles/vendor";
@import "styles/app";

4. В /src/styles/vendor.scss подключите только необходимые компоненты Bootstrap. Ненужные можно закомментировать, чтобы уменьшить итоговый размер сборки:

@import "bootstrap/scss/mixins/banner";
@include bsBanner("");

// Bootstrap's variables and mixins
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// Bootstrap's core
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";

// Bootstrap's form elements
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
// @import "bootstrap/scss/dropdown";
// @import "bootstrap/scss/button-group";

// Bootstrap's components
// @import "bootstrap/scss/tables";
// @import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
// @import "bootstrap/scss/accordion";
// @import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal";
// @import "bootstrap/scss/tooltip";
// @import "bootstrap/scss/popover";
// @import "bootstrap/scss/carousel";
// @import "bootstrap/scss/spinners";
// @import "bootstrap/scss/offcanvas";
@import "bootstrap/scss/placeholders";

// Bootstrap's helpers
@import "bootstrap/scss/helpers";

// Bootstrap's utilities
@import "bootstrap/scss/utilities/api";

5. Файл /src/styles/app.scss пока оставьте пустым — в будущем здесь будут храниться пользовательские стили приложения.

Заключение

Следуя этой настройке, вы получите:

  1. Новый Angular проект с установленным и готовым к использованию Bootstrap.

  2. Возможность управлять подключением компонентов Bootstrap через файл vendor.scss, уменьшая размер сборки.

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

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