5. CSS и препроцессоры

Vite предоставляет первоклассную поддержку всех современных способов работы со стилями — от обычного CSS до CSS Modules, препроцессоров и PostCSS.

Обычный CSS — простой импорт

import './styles/global.css'

// App.tsx
import './App.css'
// CSS инжектируется в <head> автоматически в dev режиме
// В production — извлекается в отдельный .css файл

CSS Modules — Изолированные стили

CSS Modules позволяют избежать коллизий имён классов. Vite обрабатывает любой файл с суффиксом .module.css:

.button {
  padding: 8px 16px;
  background: #646cff;
  border-radius: 6px;
}

.button:hover {
  opacity: 0.9;
}

.primary {
  background: #646cff;
}

.secondary {
  background: #1e293b;
  border: 1px solid #334155;
}

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

export function Button({ variant = 'primary' }) {
  return (
    // styles.button → 'Button_button__abc12' (уникальный хэш!)
    <button className={`${styles.button} ${styles[variant]}`}>
      Click me
    </button>
  )
}

// В DOM будет: <button class="Button_button__abc12 Button_primary__def34">

SCSS/Less/Stylus — препроцессоры

Vite поддерживает препроцессоры без дополнительных плагинов — просто установите нужный пакет:

# SCSS/Sass
npm i -D sass

# Less
npm i -D less

# Stylus
npm i -D stylus

$primary: #646cff;
$bg: #0f172a;
$radius: 8px;

// components/Card.module.scss
@use '../styles/variables' as *;

.card {
  background: $bg;
  border-radius: $radius;

  &:hover {
    box-shadow: 0 0 20px #{$primary}40;
  }

  &__title {
    color: $primary;
  }
}

PostCSS

Vite автоматически применяет PostCSS если есть postcss.config.js:

export default {
  plugins: {
    // Автопрефиксер — добавляет -webkit-, -moz- и т.д.
    autoprefixer: {},

    // Tailwind CSS
    tailwindcss: {},

    // CSS nesting (будущий синтаксис уже сегодня)
    'postcss-nesting': {},
  },
}

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

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // Инжектировать переменные во все scss файлы
        additionalData: `@use "@/styles/variables" as *;`,
      },
    },
    // PostCSS конфиг можно указать прямо здесь
    postcss: {
      plugins: [autoprefixer()],
    },
  },
})

Inline стили и CSS-in-JS

// Styled-components с Babel плагином
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-styled-components'],
      },
    }),
  ],
})

CSS переменные и Vite

/* Кастомные свойства CSS работают нативно */
:root {
  --vite-color: #646cff;
  --bg: #0f172a;
}

.card {
  background: var(--bg);
  border: 1px solid var(--vite-color);
}

Ниже — интерактивный демонстратор обработки CSS в Vite: выбирайте тип CSS и смотрите как Vite его трансформирует: