Less и Vite

Vite — популярный инструмент для фронтенд-проектов: он запускает сервер разработки и собирает сайт для публикации. Vite умеет компилировать Less сам — нужно только установить пакет less и импортировать файл .less. Отдельный скрипт слежения не нужен.

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

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

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

Vite не содержит Less внутри, а находит пакет less в node_modules проекта.

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

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

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

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

// src/styles/main.less
@primary: #2563eb;
 
h1 {
  color: @primary;
}

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

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

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

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

npm run dev

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

Сборка

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

npm run build

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

Настройки Less в Vite

Параметры компилятора передаются в vite.config.js. Например, так включается старое поведение деления:

// vite.config.js
import { defineConfig } from 'vite';
 
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        math: 'always',
      },
    },
  },
});

Объект less получает те же параметры, что и lessc, только в виде свойств. Без этого файла Vite использует настройки по умолчанию — для курса этого достаточно.

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

Если импортировать .less, не установив пакет less, сервер разработки покажет ошибку о том, что зависимость препроцессора не найдена. Выполните npm install --save-dev less и перезапустите npm run dev.