Поддержка Less

Vite предоставляет встроенную поддержку препроцессоров CSS через использование нативных возможностей сборки и подключаемых пакетов. Less интегрируется в Vite без необходимости ручной настройки сложных лоадеров, как это было в webpack-экосистеме. Достаточно установить компилятор Less и при необходимости задать параметры препроцессора в конфигурации.

Установка Less

Для работы с Less требуется установить сам препроцессор:

npm install less

или

yarn add less

Vite автоматически обнаруживает наличие Less и использует его для обработки файлов .less без дополнительных плагинов.

Использование Less-файлов в проекте

После установки можно импортировать Less-файлы напрямую в JavaScript или TypeScript модули:

import './styles/main.less'

Также поддерживается импорт внутри компонентов:

import styles from './styles/module.less'

При использовании CSS Modules достаточно назвать файл с суффиксом .module.less:

import styles from './Button.module.less'

export default function Button() {
  return <button className={styles.button}>Click</button>
}

Базовая конфигурация Less в Vite

Vite позволяет настраивать параметры Less через поле css.preprocessorOptions в vite.config.js:

export default {
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
}

Параметр javascriptEnabled активирует выполнение JavaScript внутри Less-файлов. Это требуется для некоторых библиотек стилей, использующих вычисления и динамические выражения.

Глобальные переменные и общие стили

Одним из частых сценариев является подключение глобальных переменных (цвета, отступы, миксины) без необходимости импортировать их в каждом файле.

Для этого используется опция additionalData:

export default {
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "./src/styles/variables.less";`
      }
    }
  }
}

Такой подход автоматически добавляет содержимое файла в каждый Less-модуль, что делает переменные и миксины доступными глобально.

Работа с переменными Less

Less поддерживает переменные, которые активно используются для темизации и переиспользования значений:

@primary-color: #4a90e2;
@padding-base: 16px;

.button {
  background: @primary-color;
  padding: @padding-base;
}

При сборке Vite компилирует Less в стандартный CSS, подставляя вычисленные значения.

Импорт файлов Less

Less поддерживает модульную структуру через директиву @import:

@import "reset.less";
@import "mixins.less";

Vite корректно обрабатывает такие импорты, включая относительные и алиасные пути, если они настроены в конфигурации:

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@styles': '/src/styles'
    }
  }
})

Тогда импорт становится возможным в виде:

@import "@styles/variables.less";

CSS Modules с Less

Less полностью совместим с CSS Modules в Vite. Файлы с расширением .module.less автоматически локализуют классы:

.container {
  display: flex;
  gap: 12px;
}

Использование в компоненте:

import styles from './layout.module.less'

div className={styles.container}

Vite генерирует уникальные хешированные имена классов, исключая конфликты в глобальной области.

Sourcemaps и отладка

Vite по умолчанию поддерживает source maps для Less в режиме разработки. Это позволяет видеть исходные .less файлы в DevTools браузера вместо скомпилированного CSS.

Настройка:

export default {
  css: {
    devSourcemap: true
  }
}

Это особенно полезно при сложных цепочках импортов и использовании миксинов.

Производительность обработки Less

Vite использует esbuild для JavaScript-части сборки, а для CSS-препроцессоров подключает соответствующие компиляторы. Less обрабатывается только в момент изменения файла, что обеспечивает быстрый HMR.

Особенности поведения:

  • пересборка затрагивает только изменённые зависимости
  • кеширование результатов ускоряет повторные сборки
  • HMR обновляет стили без полной перезагрузки страницы

Частые проблемы и особенности

Конфликт путей импорта

При сложной структуре проекта часто возникает проблема с относительными путями. Решение — использование алиасов через resolve.alias.

Отсутствие Less в проекте

Если Less не установлен, Vite выдаёт ошибку при первом импорте .less файла. Установка less решает проблему без дополнительных настроек.

JavaScript внутри Less

Некоторые библиотеки требуют javascriptEnabled: true. Без этого Less может выбрасывать ошибки при компиляции.

Глобальные стили дублируются

Использование additionalData может привести к повторному подключению одинаковых переменных. Это не влияет на производительность в runtime, но увеличивает размер исходного CSS до компиляции.

Интеграция Less в дизайн-системы

Less часто используется в UI-библиотеках и дизайн-системах благодаря поддержке переменных и миксинов. В Vite это упрощается за счёт автоматической обработки зависимостей и отсутствия необходимости в ручной настройке загрузчиков.

Типичная структура:

src/styles/
  variables.less
  mixins.less
  base.less
  components/

Каждый слой может быть подключён либо глобально через additionalData, либо точечно через @import.

Использование миксинов

Less миксины позволяют переиспользовать стили:

.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  .flex-center();
}

Vite компилирует такие конструкции без дополнительных трансформаций, сохраняя поведение Less на уровне препроцессора.

Совместимость с современным стеком

Less в Vite корректно работает с React, Vue и Svelte. В каждом случае обработка стилей происходит на этапе сборки, а результатом становится стандартный CSS, не зависящий от фреймворка.

Особенности интеграции:

  • React: импорт .less напрямую в компоненты
  • Vue: поддержка в <style lang="less">
  • Svelte: использование через preprocess-конфигурацию

Использование Less в Vue с Vite

<style lang="less">
@primary: #42b983;

.button {
  color: @primary;
}
</style>

Vite автоматически подключает компилятор Less без дополнительной настройки.

Глобальная архитектура стилей

Less в Vite хорошо подходит для архитектур BEM и модульного подхода. При использовании CSS Modules можно комбинировать глобальные переменные и локальные стили, разделяя ответственность между уровнями стилей.

Такой подход позволяет:

  • централизовать тему
  • изолировать компоненты
  • уменьшить риск конфликтов классов
  • ускорить поддержку крупных проектов
Оглавление