Установка через npm и Vite

CDN удобен для первых шагов, но в настоящем проекте Bulma обычно ставят через npm — менеджер пакетов Node.js. Тогда файлы лежат в проекте, версия записана в package.json, а сборщик Vite объединяет и сжимает стили вместе с вашим кодом. Нужен Node.js 20 или новее.

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

Создайте проект Vite по шаблону vanilla — обычный HTML и JavaScript без фреймворка — и установите Bulma:

npm create vite@latest oliva -- --template vanilla
cd oliva
npm install
npm install bulma

Последняя команда скачивает пакет bulma в папку node_modules и записывает его в package.json.

Что внутри пакета

node_modules/bulma/
├── css/
│   ├── bulma.css          готовые стили, читаемая версия
│   ├── bulma.min.css      то же, сжатое
│   └── versions/          сборки без тёмной темы, без хелперов
└── sass/                  исходники на Sass для своей сборки

Папка css нужна, если вы просто подключаете стили. Папка sass пригодится в уроке о настройке через Sass.

Подключение стилей

Шаблон Vite кладёт в src/ демонстрационный код со счётчиком — его можно удалить. Замените содержимое src/main.js:

// src/main.js
import 'bulma/css/bulma.min.css';
import './style.css';

Первая строка подключает Bulma, вторая — ваши стили. Порядок важен: ваши правила идут позже и поэтому могут переопределить правила Bulma.

Файл index.html уже загружает main.js. Поместите разметку страницы перед тегом <script>:

<section class="section">
  <h1 class="title">Trattoria Oliva</h1>
  <button class="button is-primary">Забронировать стол</button>
</section>
<script type="module" src="/src/main.js"></script>

Тег <script type="module"> уже есть в шаблоне. В превью под кодом стилей нет: в проекте их добавит Vite через main.js.

Запуск и сборка

npm run dev

Команда запускает сервер разработки. Откройте адрес из терминала, обычно http://localhost:5173: заголовок и кнопка оформлены стилями Bulma. При изменении файлов страница обновляется сама.

npm run build

Сборка кладёт готовый сайт в папку dist: HTML, один сжатый CSS-файл и JavaScript. Эту папку загружают на хостинг.

Без сборщика

Если сборщика нет, подключите файл из node_modules обычной ссылкой в <head>: node_modules/bulma/css/bulma.min.css. Но для сайта на хостинге удобнее CDN или Vite: папку node_modules на сервер обычно не копируют.

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

Импортировать свои стили раньше Bulma: сначала ./style.css, потом bulma/css/bulma.min.css. Тогда при равной специфичности правила Bulma окажутся последними и перекроют ваши — например, ваш цвет для .title «не применится». Bulma всегда подключайте первой, свои стили — после неё.