Bootstrap с Sass в 2026 году: npm, Vite и настройка переменных без Bower и Grunt

05.10.2020 Admin

Старая связка Bower + Grunt для Bootstrap сегодня уже не нужна. Для Bootstrap 5.3 официальный путь — установить пакет через npm и собирать Sass обычным Sass CLI или современным сборщиком вроде Vite.

Создаём проект

npm init -y
npm install bootstrap @popperjs/core
npm install --save-dev vite sass

Структура

project/
├── src/
│   ├── index.html
│   ├── js/main.js
│   └── scss/styles.scss
├── package.json
└── node_modules/

Импорт Bootstrap Sass

// src/scss/styles.scss
$primary: #5b2be0;
$border-radius: .75rem;

@import "bootstrap/scss/bootstrap";

Собственные значения задавайте до импорта Bootstrap. Не редактируйте файлы внутри node_modules: изменения исчезнут при обновлении пакета.

JavaScript

import '../scss/styles.scss';
import * as bootstrap from 'bootstrap';

Запуск через Vite

npx vite

Для постоянного проекта добавьте команды dev и build в package.json.

Выборочный импорт

Если итоговый CSS слишком большой, Bootstrap позволяет импортировать отдельные Sass-модули. Сначала подключаются функции, переменные, maps и mixins, затем только нужные компоненты. Это официально рекомендуемый способ уменьшить сборку.

А если нужен только CSS

Для простого сайта Sass вообще не обязателен: можно использовать готовую сборку Bootstrap через CDN или локальные compiled-файлы. Sass нужен прежде всего тогда, когда вы хотите менять систему переменных, карты цветов и состав компонентов.

Clip-Clap