Подключение CSS через плагины

CSS в сборке Rollup подключается не напрямую, а через систему плагинов, поскольку сам Rollup изначально ориентирован на работу исключительно с JavaScript-модулями и их зависимостями. Любые нефайловые ресурсы, включая стили, изображения и шрифты, обрабатываются через расширения, которые интегрируются в пайплайн сборки.

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

Основные стратегии обработки CSS:

  • инлайнинг стилей в JavaScript
  • извлечение CSS в отдельный файл
  • компиляция CSS через препроцессоры
  • модульная обработка (CSS Modules)

Каждая стратегия реализуется через соответствующие плагины, подключаемые в конфигурации Rollup.

Базовое подключение CSS через @rollup/plugin-postcss

Наиболее распространённым решением является плагин PostCSS-экосистемы.

Установка:

npm install -D rollup-plugin-postcss postcss

Конфигурация Rollup:

import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    postcss()
  ]
};

При таком подключении CSS может импортироваться прямо в Jav * aScript:

import './styles.css';

Режимы обработки CSS в PostCSS-плагине

Плагин предоставляет несколько ключевых режимов работы, определяющих поведение сборки.

Инлайнинг стилей в JavaScript

В этом режиме CSS преобразуется в строку и вставляется в DOM во время выполнения.

postcss({
  inject: true
})

Механизм основан на создании тега <style>:

  • CSS компилируется в текстовую строку
  • создаётся DOM-элемент
  • стили вставляются в <head>

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

Извлечение CSS в отдельный файл

Для production-сборок чаще используется стратегия выделения CSS в отдельный файл.

postcss({
  extract: true
})

Результат сборки:

dist/
  bundle.js
  styles.css

Преимущества такого подхода:

  • параллельная загрузка CSS и JS
  • кэширование стилей отдельно от скриптов
  • отсутствие FOUC-эффектов при правильной настройке

Настройка имени выходного CSS-файла

Имя файла можно задать явно:

postcss({
  extract: 'dist/styles.css'
})

Также поддерживается динамическое именование через шаблоны в более сложных конфигурациях сборки.

Подключение CSS Modules

CSS Modules позволяют локализовать стили на уровне компонентов.

postcss({
  modules: true
})

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

/* button.css */
.button {
  color: red;
}
import styles from './button.css';

element.className = styles.button;

Механизм работы:

  • каждый класс преобразуется в уникальный хэш
  • исключается глобальное загрязнение пространства имён
  • обеспечивается предсказуемая изоляция компонентов

Интеграция с PostCSS-плагинами

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

Типичный набор:

  • autoprefixer
  • nested rules
  • cssnano
  • custom properties transform

Пример конфигурации:

import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';

export default {
  plugins: [
    postcss({
      plugins: [
        autoprefixer(),
        cssnano()
      ]
    })
  ]
};

Использование Sass и Less через плагины

CSS-препроцессоры подключаются через расширения PostCSS или отдельные плагины.

Sass

npm install -D sass
postcss({
  extensions: ['.css', '.scss'],
  use: [
    ['sass', {
      includePaths: ['./src/styles']
    }]
  ]
})

Less

npm install -D less
postcss({
  extensions: ['.css', '.less'],
  use: ['less']
})

Препроцессоры позволяют:

  • использовать переменные
  • вкладывать селекторы
  • применять миксины
  • структурировать стили на уровне логики

Обработка нескольких CSS-файлов

Rollup позволяет импортировать несколько CSS-файлов в одном проекте, при этом плагин объединяет их в единый результат.

import './reset.css';
import './layout.css';
import './theme.css';

Поведение зависит от конфигурации:

  • при extract: все стили объединяются в один файл
  • при inject: стили добавляются в DOM в порядке импорта

Порядок применения стилей

Порядок импортов критически важен, поскольку влияет на каскад:

  • базовые стили импортируются первыми
  • компоненты — позже
  • переопределения — последними

Rollup сохраняет порядок зависимостей в графе модулей, что обеспечивает предсказуемое применение CSS.

Условная загрузка CSS

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

if (theme === 'dark') {
  import('./dark.css');
}

При использовании PostCSS-плагина такой CSS может быть вынесен в отдельный чанк или встроен в основной бандл, в зависимости от настроек code splitting.

Code Splitting и CSS

При использовании code splitting CSS также разделяется по чанкам.

Пример:

import('./feature.js');

Если внутри feature.js есть импорт CSS:

import './feature.css';

Rollup может:

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

Изоляция стилей в библиотечных сборках

При сборке библиотек важно контролировать экспорт CSS.

Основные подходы:

  • полное инлайнирование для простоты подключения
  • отдельный CSS-файл для пользовательской интеграции
  • гибридный режим с возможностью отключения стилей

Пример настройки:

postcss({
  extract: true,
  minimize: true,
  sourceMap: true
})

Source Maps для CSS

Source maps позволяют отлаживать стили в браузере, сопоставляя итоговый CSS с исходными файлами.

postcss({
  sourceMap: true
})

Преимущества:

  • удобная отладка в DevTools
  • точное определение исходного файла
  • упрощение поддержки больших проектов

Минификация CSS

Минификация обычно выполняется через cssnano:

postcss({
  plugins: [
    require('cssnano')()
  ]
})

Процесс включает:

  • удаление пробелов
  • сокращение селекторов
  • оптимизацию свойств
  • устранение дубликатов

Типовые ошибки при подключении CSS

На практике часто встречаются следующие проблемы:

  • конфликт версий PostCSS-плагинов
  • дублирование стилей при неправильном extract-режиме
  • отсутствие обработки CSS Modules
  • некорректный порядок импортов
  • несогласованность между dev и prod режимами

Оптимизация CSS в Rollup-сборке

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

  • разделение критических и некритических стилей
  • использование extract для production
  • минимизация через cssnano
  • устранение неиспользуемых правил (purgeCSS при необходимости)
  • контроль дублирования через архитектуру модулей

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

Оглавление