Поддержка Stylus

Stylus поддерживается в Vite на уровне нативной интеграции через трансформационный пайплайн, построенный поверх esbuild и PostCSS. При работе с .styl файлами Vite автоматически распознаёт расширение, применяет соответствующий препроцессор и включает результат в сборку без необходимости ручной настройки сложных цепочек компиляции.

Обработка Stylus в Vite не требует отдельного loader-конфига, как в традиционных сборщиках. Достаточно наличия установленного пакета stylus, после чего Vite активирует встроенную поддержку препроцессинга.

Установка зависимостей Stylus

Для активации обработки .styl файлов требуется установить сам препроцессор:

npm install stylus

или

yarn add stylus

Vite не включает Stylus в базовую поставку, что позволяет уменьшить размер ядра и оставить выбор инструментов за проектом. При отсутствии пакета попытка импорта .styl файла приведёт к ошибке резолва зависимостей.

Подключение Stylus в проекте

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

import './styles/main.styl'

Также поддерживается импорт внутри компонентов фреймворков, например Vue или React:

import styles from './styles.module.styl'

Vite автоматически применяет компиляцию Stylus перед передачей результата в CSS pipeline.

Базовая конфигурация Vite для Stylus

В большинстве случаев дополнительная конфигурация не требуется. Однако Vite позволяет передавать параметры в Stylus через css.preprocessorOptions.

// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      stylus: {
        // глобальные переменные или миксины
      }
    }
  }
}

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

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

Одна из ключевых возможностей интеграции — автоматическое подключение общих ресурсов:

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

Такой подход позволяет избегать дублирования @import в каждом файле и централизовать стили.

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

Stylus поддерживает неявные и явные переменные, что делает его гибким инструментом для построения дизайн-систем.

primaryColor = #42b983

.button
  background primaryColor
  padding 10px 20px

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

bordered()
  border 1px solid #ddd

.card
  bordered()
  padding 20px

Vite не вмешивается в семантику Stylus, а лишь обеспечивает корректную трансформацию в CSS.

Импорт Stylus-файлов и модульная структура

Поддерживаются как глобальные стили, так и CSS Modules:

  • styles.styl — глобальные стили
  • styles.module.styl — модульные стили

Пример использования CSS Modules:

import styles from './button.module.styl'

button.className = styles.active

Каждый класс внутри .module.styl автоматически хешируется, предотвращая конфликты имён.

Взаимодействие Stylus и PostCSS

После компиляции Stylus результат передаётся в PostCSS-пайплайн Vite. Это позволяет использовать:

  • autoprefixer
  • postcss-nesting
  • cssnano (в production)

Порядок обработки:

  1. Stylus → CSS
  2. PostCSS трансформации
  3. Интеграция в сборку Vite

Горячая перезагрузка (HMR)

Vite обеспечивает мгновенное обновление стилей при изменении .styl файлов. HMR работает на уровне модуля CSS без перезагрузки страницы.

Изменения в Stylus:

  • переменные
  • миксины
  • вложенные стили
  • импортируемые файлы

обрабатываются инкрементально, что минимизирует задержки при разработке.

Вложенность и структура кода

Stylus поддерживает нативную вложенность без фигурных скобок:

.nav
  display flex

  .item
    color #333

    &:hover
      color #000

Vite сохраняет структуру после трансформации, не нарушая вложенные селекторы.

Работа с импортами внутри Stylus

Stylus-файлы могут импортировать другие .styl ресурсы:

@import 'mixins'
@import 'variables'

Vite резолвит пути относительно корня проекта и текущего файла, поддерживая алиасы из конфигурации:

resolve: {
  alias: {
    '@': '/src'
  }
}

Поддержка alias-путей

Stylus корректно работает с алиасами Vite:

@import '@/styles/variables.styl'

Это обеспечивает согласованность импортов между JavaScript и стилями.

Производственные особенности сборки

В production-режиме Vite:

  • минимизирует итоговый CSS
  • удаляет неиспользуемые селекторы (в связке с PostCSS-плагинами)
  • объединяет стили в чанки
  • оптимизирует порядок подключения

Stylus при этом компилируется заранее, не влияя на runtime-производительность.

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

Отсутствие stylus в node_modules При импорте .styl файла сборка завершается ошибкой. Решение — установка stylus.

Конфликты переменных Глобальные переменные через additionalData могут переопределять локальные значения.

Некорректные пути импорта Stylus использует собственный резолвер, поэтому важно учитывать настройки resolve.alias.

Смешивание синтаксисов В одном проекте допустимо использование SCSS и Stylus, но это увеличивает сложность поддержки и требует явного разделения областей применения.

Интеграция Stylus в крупные проекты

При масштабировании проекта Stylus часто используется для:

  • построения дизайн-систем
  • централизованных тем
  • динамических токенов
  • повторно используемых UI-компонентов

Vite обеспечивает стабильную работу Stylus даже при большом количестве файлов благодаря модульной архитектуре обработки стилей и кешированию трансформаций.

Оглавление