Sass в Vite

Sass переводит файл scss в обычные стили при импорте, отдельный шаг сборки для этого не нужен.

Синтаксис scss позволяет хранить цвета в переменных и вкладывать селекторы друг в друга. Vite компилирует такой файл на лету, если в проекте есть пакет sass. Поставим его как зависимость для разработки:

npm install sass --save-dev

Оформим надпись hello через переменную:

$accent: #d35400;

body {
  color: $accent;
}

Импорт указывает на файл scss так же, как на css:

import './theme.scss';

document.body.textContent = 'hello';

Запустим сервер разработки и откроем http://localhost:5173. Текст окажется оранжевым, хотя в репозитории лежит не готовый CSS, а src/theme.scss. При команде npm с подкомандой run и именем build преобразование тоже выполнит Vite - отдельный скрипт для Sass в package.json не требуется.

Создайте src/palette.scss с переменной цвета и выведите слово focus через импорт этого файла в src/main.js.

Измените значение переменной в palette.scss и сохраните файл, не перезапуская сервер вручную.