Настройка через Sass

CSS-переменные меняют готовый файл Bootstrap, а Sass позволяет собрать этот файл заново со своими значениями. Sass — язык поверх CSS с переменными вида $primary, из которых Bootstrap и генерирует все свои классы. Поменяли $primary — и сразу изменились кнопки, ссылки, bg-primary, text-primary и рамки полей при фокусе. Этот способ требует сборщика, поэтому работаем в проекте на Vite из второго урока.

Установка Sass

npm install -D sass

Vite умеет компилировать файлы .scss сам, если пакет sass установлен. Создайте папку src/scss/ и в ней файл styles.scss.

Переопределение переменных

Свои значения пишут до подключения Bootstrap: его переменные объявлены с флагом !default и не перезаписывают уже заданные.

// src/scss/styles.scss
$primary: #6f42c1;
$border-radius: .75rem;
$font-family-sans-serif: Georgia, serif;
 
@import "bootstrap/scss/bootstrap";

Затем в src/main.js замените строку со стилями Bootstrap на импорт этого файла:

// src/main.js
import './scss/styles.scss';
import 'bootstrap';

Запустите npm run dev: все кнопки btn-primary, ссылки и бейджи text-bg-primary стали фиолетовыми, скругления крупнее, шрифт другой — во всех компонентах сразу.

Полезные переменные

Только нужные части

Полный Bootstrap весит около 230 КБ несжатого CSS. Если нужны только сетка, кнопки и утилиты, подключите части по отдельности. Порядок важен: сначала функции, потом ваши переменные, потом обязательные файлы, потом нужные компоненты:

// src/scss/styles.scss
@import "bootstrap/scss/functions";
 
$primary: #6f42c1;
 
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
 
$spacers: map-merge($spacers, (6: 4.5rem));
 
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
 
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";

Строка с map-merge добавляет в шкалу отступов шестой шаг — появятся классы mt-6, p-6 и другие. Последний файл, utilities/api, генерирует сами утилиты, поэтому он всегда в конце.

Предупреждения при сборке

Новые версии Sass выводят в терминал много предупреждений об устаревшем @import из исходников Bootstrap 5.3. Сборке они не мешают. Скрыть их можно в vite.config.js в корне проекта:

// vite.config.js
import { defineConfig } from 'vite';
 
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        silenceDeprecations: ['import', 'mixed-decls', 'color-functions', 'global-builtin'],
      },
    },
  },
});

После перезапуска npm run dev терминал станет чистым.

Частая ошибка

Писать свои переменные после @import "bootstrap/scss/bootstrap". К этому моменту Bootstrap уже сгенерировал все классы со старыми значениями, и $primary: #6f42c1; ни на что не повлияет. Переопределения всегда идут до импорта переменных Bootstrap.