Поддержка SASS и SCSS

Поддержка Sass и SCSS в Vite реализована на уровне нативного интегрированного препроцессинга через инструменты сборки, что позволяет использовать современные возможности Sass без дополнительной конфигурации бандлеров. В основе лежит Dart Sass, который является актуальной реализацией языка и поддерживается как основной движок.

Vite не реализует собственный препроцессор Sass, а делегирует обработку файлов внешнему компилятору Sass. При обнаружении файлов с расширениями .scss или .sass происходит автоматическая трансформация в CSS до этапа постобработки и сборки модулей.

Процесс включает несколько стадий:

  • определение типа ресурса по расширению;
  • передача файла в Dart Sass;
  • получение результирующего CSS;
  • последующая обработка через PostCSS (если настроен);
  • интеграция в граф модулей Vite.

Такой подход позволяет сохранить скорость разработки за счёт кэширования и HMR.

Установка Sass

Для активации поддержки SCSS достаточно установить пакет Sass:

npm install sass

или

yarn add sass

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

Поддержка SCSS и Sass синтаксиса

Поддерживаются два основных формата:

  • .scss — синтаксис, совместимый с CSS, с использованием фигурных скобок и точек с запятой;
  • .sass — сокращённый синтаксис с отступами без фигурных скобок.

Пример .scss:

$primary-color: #42b883;

.button {
  background: $primary-color;
  padding: 12px 16px;

  &:hover {
    background: darken($primary-color, 10%);
  }
}

Пример .sass:

$primary-color: #42b883

.button
  background: $primary-color
  padding: 12px 16px

  &:hover
    background: darken($primary-color, 10%)

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

Импорт SCSS в Vite-проект

Sass-файлы могут импортироваться напрямую в JavaScript и TypeScript модули:

import './styles/main.scss'

Также поддерживается импорт внутри других SCSS файлов:

@import './variables.scss';
@import './mixins.scss';

После компиляции такие импорты разрешаются в единый CSS граф.

Конфигурация preprocessorOptions

Vite предоставляет механизм тонкой настройки Sass через css.preprocessorOptions в конфигурационном файле:

// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/variables.scss" as *;`
      }
    }
  }
}

Данный параметр позволяет автоматически подмешивать общие стили, переменные или миксины во все SCSS-файлы проекта.

Использование additionalData особенно полезно для:

  • глобальных переменных темы;
  • базовых миксинов;
  • функций оформления;
  • системных констант.

Глобальные стили и единая точка входа

Типичная структура проекта включает единый файл стилей:

src/styles/index.scss

который агрегирует остальные части:

@use './reset';
@use './typography';
@use './variables';
@use './components/buttons';

Далее этот файл импортируется один раз в приложении:

import './styles/index.scss'

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

CSS Modules с SCSS

Vite поддерживает CSS Modules из коробки, включая SCSS-варианты. Для этого используется соглашение об именовании:

Button.module.scss

Пример:

.wrapper {
  display: flex;
  gap: 8px;
}

.active {
  color: #42b883;
}

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

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

element.className = styles.wrapper

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

Алиасы и пути импорта

Vite позволяет использовать алиасы, что упрощает работу с Sass-структурой:

import { defineConfig } from 'vite'

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

После этого возможны импорты:

@use '@/styles/variables' as *;

Sass корректно разрешает пути через резолвер Vite.

Переменные, миксины и функции

Sass сохраняет полный набор возможностей препроцессинга:

Переменные:

$spacing: 16px;
$color-bg: #1e1e1e;

Миксины:

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.container {
  @include flex-center;
}

Функции:

@function rem($px) {
  @return ($px / 16) * 1rem;
}
.title {
  font-size: rem(24);
}

Современный Sass: @use и @forward

Современный стандарт Sass предполагает отказ от @import в пользу модульной системы:

@use подключает модуль с изоляцией пространства имён:

@use 'variables';

.button {
  color: variables.$primary;
}

@forward используется для реэкспорта:

@forward 'variables';
@forward 'mixins';

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

Source maps и отладка

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

При возникновении ошибок компиляции Sass сообщение включает:

  • путь к исходному SCSS файлу;
  • строку и колонку;
  • описание синтаксической ошибки.

Hot Module Replacement (HMR)

Изменения в SCSS файлах обрабатываются через механизм HMR Vite. При изменении стилей происходит:

  • повторная компиляция только изменённого файла;
  • обновление CSS без перезагрузки страницы;
  • сохранение состояния приложения.

HMR работает как для глобальных SCSS файлов, так и для CSS Modules.

Интеграция с TypeScript и компонентным подходом

В проектах с компонентной архитектурой SCSS часто локализуется на уровне компонентов:

components/
  Button/
    Button.ts
    Button.module.scss

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

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

Vite оптимизирует работу Sass за счёт:

  • кэширования результатов компиляции;
  • инкрементальной пересборки;
  • параллельной обработки модулей;
  • отсутствия полного бандлинга в dev-режиме.

Dart Sass работает синхронно в процессе сборки, но Vite минимизирует задержки за счёт архитектуры ES-модулей.

Типичные особенности поведения и ограничения

Некоторые аспекты требуют учёта при работе:

  • @import считается устаревшим и может замедлять сборку;
  • глобальные переменные через additionalData могут приводить к дублированию, если не структурированы;
  • абсолютные пути требуют настройки alias;
  • циклические зависимости в Sass-модулях приводят к ошибкам компиляции;
  • функции Sass выполняются на этапе сборки, а не в рантайме браузера.

Использование модульной структуры и @use снижает вероятность конфликтов и упрощает масштабирование стилей.

Оглавление