Sass и Vite

Vite — популярный инструмент для фронтенд-проектов: он запускает сервер разработки и собирает сайт для публикации. Vite сам компилирует Sass — достаточно установить пакет компилятора и импортировать файлы .scss. Отдельный шаг sass --watch не нужен.

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

Создайте проект из шаблона на чистом JavaScript и установите компилятор Sass:

npm create vite@latest site -- --template vanilla
cd site
npm install
npm install --save-dev sass-embedded

sass-embedded — тот же Dart Sass, упакованный так, чтобы быстрее работать внутри инструментов сборки. Обычный пакет sass тоже подходит: Vite использует тот, что установлен.

Где лежат стили

В проекте на Vite код находится в src/. Стили положите в src/styles/:

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

Всё, что в этом курсе лежит в styles/, в проекте на Vite кладите в src/styles/. Создайте src/styles/main.scss:

// src/styles/main.scss
$primary: #2563eb;
 
h1 {
  color: $primary;
}

Импорт стилей

Vite добавляет стили на страницу, когда их импортирует JavaScript. Откройте src/main.js, удалите код шаблона и импортируйте файл:

// src/main.js
import './styles/main.scss';
 
document.querySelector('#app').innerHTML = '<h1>Мой сайт</h1>';

Запустите сервер разработки:

npm run dev

Откройте http://localhost:5173 — заголовок синий. Измените $primary и сохраните файл: страница обновится сразу, без перезагрузки.

Сборка

Для публикации соберите проект:

npm run build

Vite скомпилирует Sass, сожмёт CSS и положит его в dist/assets/ с хешем в имени, например index-B7f3kQ2a.css. Папку dist/ и нужно загружать на сервер.

Какие файлы Vite считает Sass

Частичным файлам посвящена глава о файлах и модулях.

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

Если импортировать файл .scss, не установив компилятор, сервер разработки покажет ошибку о том, что зависимость препроцессора не найдена. Sass не входит в Vite — выполните npm install --save-dev sass-embedded и перезапустите npm run dev.