Узнайте, как интегрировать 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, чтобы вы получили полный контроль над дизайном приложения при сохранении чистого кода. Следите за обновлениями!