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

CSS-переменные меняют готовый файл Bulma прямо в браузере. Sass — препроцессор CSS — даёт другой путь: вы собираете Bulma из исходников со своими значениями. Тогда все оттенки, цвет текста на кнопках и тёмная тема рассчитываются заново под вашу палитру, а в итоговый CSS попадают только нужные части фреймворка.

Подготовка

В проекте Vite из урока об установке добавьте компилятор Sass:

npm install -D sass

Создайте файл src/main.scss и подключите его в src/main.js вместо готового CSS:

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

Vite сам скомпилирует .scss в CSS при запуске npm run dev и при сборке. Свежие версии Sass могут печатать в терминал предупреждения DEPRECATION WARNING об устаревшем синтаксисе внутри исходников Bulma — на результат они не влияют.

Своя тема

Исходники лежат в node_modules/bulma/sass. Правило @use с блоком with загружает их и подставляет ваши значения переменных:

// src/main.scss
@use "bulma/sass" with (
  $primary: hsl(70, 45%, 42%),
  $link: hsl(20, 70%, 45%),
  $family-primary: '"Georgia", serif',
  $radius: 0.25rem
);

Откройте http://localhost:5173: кнопки is-primary стали оливковыми, ссылки — терракотовыми, текст набран Georgia, углы почти прямые. Обратите внимание на кавычки у шрифта: внешние одинарные — строка Sass, внутренние двойные попадут в CSS.

Свой цвет

Карта $custom-colors добавляет к палитре новые цвета:

// src/main.scss
@use "bulma/sass" with (
  $primary: hsl(70, 45%, 42%),
  $custom-colors: (
    "wine": hsl(345, 60%, 35%),
  )
);

После сборки появятся классы для нового цвета, как для встроенных: button is-wine, tag is-wine, has-text-wine, has-background-wine-light.

<button class="button is-wine">Винная карта</button>

В превью под кодом кнопка без цвета: класса is-wine нет в готовом Bulma с CDN, он появляется только в вашей сборке.

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

Полный Bulma весит около 680 КБ в сжатом виде. Если сайту нужны лишь кнопки, заголовки и колонки, подключите модули по отдельности:

// src/main.scss
@use "bulma/sass/utilities" with (
  $primary: hsl(70, 45%, 42%)
);
@use "bulma/sass/base";
@use "bulma/sass/themes";
@use "bulma/sass/elements/button";
@use "bulma/sass/elements/title";
@use "bulma/sass/grid/columns";

Сначала настраиваются утилиты с переменными, затем идут базовые стили, темы с CSS-переменными и нужные элементы. Итоговый файл станет в несколько раз меньше.

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

Настраивать Bulma в двух местах: например, в одном файле написать @use "bulma/sass/utilities" with (...), а в другом, загруженном раньше, — просто @use "bulma/sass". Модуль Sass настраивается только при первой загрузке, и сборка остановится с ошибкой, что модуль уже загружен и его нельзя настроить через with. Держите @use ... with (...) в одном файле и подключайте его первым.