style-loader: встраивание стилей в DOM

style-loader — загрузчик Webpack, предназначенный для внедрения CSS-кода непосредственно в DOM-документ через тег <style>. Вместо генерации отдельного CSS-файла стили встраиваются в JavaScript-бандл и подключаются во время выполнения приложения.

Основная задача загрузчика — обеспечить динамическое подключение стилей в браузере без необходимости отдельной загрузки CSS-файлов.

Наиболее часто используется:

  • в режиме разработки;
  • вместе с Hot Module Replacement;
  • в небольших приложениях;
  • при создании библиотек;
  • для динамически подключаемых модулей;
  • в проектах с микрофронтендами.

Принцип работы

После обработки CSS-файла Webpack передаёт содержимое в style-loader. Загрузчик:

  1. Создаёт тег <style>.
  2. Помещает внутрь CSS-код.
  3. Добавляет тег в <head> документа.
  4. Обновляет содержимое при HMR.

Схема работы:

CSS → css-loader → style-loader → <style> в DOM

Без css-loader загрузчик не сможет интерпретировать CSS как JavaScript-модуль.

Установка

npm install style-loader css-loader --save-dev

или:

yarn add style-loader css-loader -D

Базовая настройка

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

Порядок загрузчиков

Webpack применяет загрузчики справа налево.

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

use: [
  'style-loader',
  'css-loader'
]

эквивалентна:

style-loader(css-loader(file.css))

Этапы обработки

css-loader

  • читает CSS;
  • обрабатывает @import;
  • обрабатывает url();
  • преобразует CSS в JS-модуль.

style-loader

  • получает JS-модуль со стилями;
  • создаёт <style>;
  • вставляет стили в DOM.

Импорт CSS

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

import './styles.css';

Во время выполнения Webpack автоматически внедрит CSS в страницу.

Результат в браузере

При импорте:

import './app.css';

в DOM появится примерно такой код:

<style>
body {
  background: #000;
}
</style>

Работа с несколькими CSS-файлами

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

Webpack создаст несколько блоков стилей либо объединит их в зависимости от конфигурации и режима сборки.

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

Установка

npm install sass sass-loader style-loader css-loader --save-dev

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

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

npm install less less-loader style-loader css-loader --save-dev
{
  test: /\.less$/i,
  use: [
    'style-loader',
    'css-loader',
    'less-loader'
  ]
}

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

npm install postcss postcss-loader autoprefixer --save-dev
{
  test: /\.css$/i,
  use: [
    'style-loader',
    'css-loader',
    'postcss-loader'
  ]
}

Поддержка Hot Module Replacement

Одно из ключевых преимуществ style-loader — корректная работа с HMR.

При изменении CSS:

  • страница не перезагружается;
  • стили обновляются мгновенно;
  • состояние приложения сохраняется.

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

module.exports = {
  devServer: {
    hot: true
  }
};

Отличие от MiniCssExtractPlugin

style-loader

  • внедряет CSS в DOM;
  • стили находятся внутри JS;
  • подходит для development;
  • поддерживает быстрый HMR;
  • увеличивает размер JavaScript.

MiniCssExtractPlugin

  • выносит CSS в отдельный файл;
  • используется в production;
  • позволяет кэшировать стили отдельно;
  • уменьшает размер JS-бандла;
  • требует дополнительного HTTP-запроса.

Типичная схема разделения development и production

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isDev = process.env.NODE_ENV === 'development';

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          isDev
            ? 'style-loader'
            : MiniCssExtractPlugin.loader,

          'css-loader'
        ]
      }
    ]
  },

  plugins: [
    !isDev &&
      new MiniCssExtractPlugin({
        filename: '[name].[contenthash].css'
      })
  ].filter(Boolean)
};

Опция injectType

Позволяет управлять способом внедрения стилей.

Стандартное поведение

{
  loader: 'style-loader'
}

Эквивалентно:

{
  loader: 'style-loader',
  options: {
    injectType: 'styleTag'
  }
}

styleTag

Создаёт отдельный <style> для каждого модуля.

{
  loader: 'style-loader',
  options: {
    injectType: 'styleTag'
  }
}

Особенности

  • удобен для HMR;
  • упрощает отладку;
  • увеличивает количество тегов <style>.

singletonStyleTag

Все стили помещаются в один общий <style>.

{
  loader: 'style-loader',
  options: {
    injectType: 'singletonStyleTag'
  }
}

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

  • меньше DOM-узлов;
  • удобно для старых браузеров.

Недостатки

  • хуже работает source map;
  • сложнее обновление отдельных частей CSS.

lazyStyleTag

Стили подключаются вручную.

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

{
  test: /\.lazy.css$/i,
  use: [
    {
      loader: 'style-loader',
      options: {
        injectType: 'lazyStyleTag'
      }
    },
    'css-loader'
  ]
}

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

import styles from './dialog.lazy.css';

styles.use();
styles.unuse();

Сценарии применения lazy-режима

Динамические модальные окна

import modalStyles from './modal.lazy.css';

function openModal() {
  modalStyles.use();
}

Микрофронтенды

Изолированное подключение стилей:

widgetStyles.use();

Временные темы оформления

darkTheme.use();
lightTheme.unuse();

lazySingletonStyleTag

Комбинирует:

  • singleton-поведение;
  • ручное управление подключением.
{
  loader: 'style-loader',
  options: {
    injectType: 'lazySingletonStyleTag'
  }
}

Опция insert

Позволяет указать место вставки <style>.

Вставка в конец <body>

{
  loader: 'style-loader',
  options: {
    insert: 'body'
  }
}

Пользовательская функция вставки

{
  loader: 'style-loader',
  options: {
    insert: function insertAtTop(element) {
      const parent = document.querySelector('head');

      const lastInsertedElement =
        window._lastElementInsertedByStyleLoader;

      if (!lastInsertedElement) {
        parent.insertBefore(element, parent.firstChild);
      } else if (lastInsertedElement.nextSibling) {
        parent.insertBefore(
          element,
          lastInsertedElement.nextSibling
        );
      } else {
        parent.appendChild(element);
      }

      window._lastElementInsertedByStyleLoader = element;
    }
  }
}

Вставка в Shadow DOM

style-loader может работать с Web Components.

Пример

const shadowRoot = element.attachShadow({
  mode: 'open'
});
{
  loader: 'style-loader',
  options: {
    insert: function insertIntoShadowRoot(element) {
      shadowRoot.appendChild(element);
    }
  }
}

Опция attributes

Позволяет добавлять атрибуты к тегам <style>.

{
  loader: 'style-loader',
  options: {
    attributes: {
      id: 'main-styles',
      'data-app': 'frontend'
    }
  }
}

Результат:

<style id="main-styles" data-app="frontend">

Опция base

Используется при работе с DLLPlugin и несколькими runtime-бандлами.

{
  loader: 'style-loader',
  options: {
    base: 1000
  }
}

Позволяет избегать конфликтов идентификаторов модулей.

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

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

module.exports = {
  devtool: 'source-map',

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  }
};

Работа с CSS Modules

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

{
  test: /\.module\.css$/i,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true
      }
    }
  ]
}

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

button.module.css

.button {
  background: red;
}

button.js

import styles from './button.module.css';

button.className = styles.button;

Генерация уникальных классов

css-loader автоматически преобразует:

.button

в:

.button_a1b2c3

Это предотвращает конфликты имён.

Настройка localIdentName

{
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName:
        '[name]__[local]__[hash:base64:5]'
    }
  }
}

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

Объявление модулей

declare module '*.css';

Для CSS Modules

declare module '*.module.css' {
  const classes: {
    [key: string]: string;
  };

  export default classes;
}

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

style-loader имеет особенности, влияющие на производительность.

Увеличение JS-бандла

CSS становится частью Jav * aScript:

bundle.js
 ├─ JS
 └─ CSS

Блокировка рендеринга

Стили появляются только после:

  1. загрузки JS;
  2. выполнения JS;
  3. вставки <style>.

Из-за этого возможен:

  • FOUC;
  • задержанный рендеринг;
  • скачки интерфейса.

Memory overhead

При большом количестве CSS:

  • растёт потребление памяти;
  • увеличивается время инициализации;
  • DOM получает множество <style>.

Когда style-loader подходит лучше всего

Development-среда

Наиболее распространённый сценарий.

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

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

SPA-приложения

Особенно при активной разработке интерфейса.

Внутренние административные панели

Где производительность первого рендера менее критична.

Прототипы

Позволяет быстро запускать сборку без сложной оптимизации.

Когда style-loader использовать нежелательно

Production-приложения

Особенно:

  • крупные SPA;
  • SSR;
  • публичные сайты;
  • SEO-зависимые проекты.

Большие CSS-бандлы

Весь CSS попадает в JS:

main.js = JS + CSS

Критичный first paint

Отдельный CSS-файл загружается браузером раньше JavaScript.

Комбинирование с dynamic import

Асинхронная загрузка стилей

import('./admin.css');

Webpack создаст отдельный chunk со стилями.

Очистка стилей

При удалении модуля HMR может автоматически удалять старые стили.

В lazy-режиме:

styles.unuse();

удаляет CSS из DOM.

Типичные ошибки

Отсутствует css-loader

Ошибка:

You may need an appropriate loader

Причина:

use: ['style-loader']

без css-loader.

Неправильный порядок loaders

Ошибка:

use: [
  'css-loader',
  'style-loader'
]

Правильно:

use: [
  'style-loader',
  'css-loader'
]

Использование в production без extraction

Проблемы:

  • большой JS;
  • плохой кэш;
  • медленный first render.

Конфликт CSS Modules и обычного CSS

Некорректная конфигурация:

modules: true

для всех файлов.

Правильнее разделять:

test: /\.module\.css$/

и:

test: /\.css$/
exclude: /\.module\.css$/

Разделение обычного CSS и CSS Modules

module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      },

      {
        test: /\.css$/i,
        exclude: /\.module\.css$/i,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

Архитектурные особенности

style-loader работает исключительно в браузерной среде.

На сервере:

  • DOM отсутствует;
  • <style> создать невозможно;
  • SSR требует альтернативного подхода.

Для серверного рендеринга обычно применяют:

  • MiniCssExtractPlugin;
  • CSS extraction;
  • отдельные CSS assets.

Внутренний механизм runtime

Во время выполнения Webpack добавляет runtime-код, который:

  • отслеживает подключённые стили;
  • управляет HMR;
  • создаёт и обновляет <style>;
  • синхронизирует lazy-режим.

Упрощённо runtime выглядит так:

const style = document.createElement('style');

style.innerHTML = css;

document.head.appendChild(style);

Реальная реализация значительно сложнее и учитывает:

  • source maps;
  • CSP;
  • HMR;
  • старые браузеры;
  • порядок вставки;
  • удаление стилей.

CSP и nonce

При строгой Content Security Policy может потребоваться nonce.

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

{
  loader: 'style-loader',
  options: {
    attributes: {
      nonce: 'webpack-nonce'
    }
  }
}

Использование глобальной переменной nonce

__webpack_nonce__ = 'random_nonce_value';

Webpack автоматически применит nonce к создаваемым тегам.

Интеграция с Module Federation

В микрофронтенд-архитектуре style-loader часто используется из-за:

  • независимой загрузки модулей;
  • динамического подключения remote-приложений;
  • локальной инкапсуляции стилей.

Но возникают проблемы:

  • конфликтов CSS;
  • дублирования стилей;
  • порядка вставки.

Поэтому обычно комбинируют:

  • CSS Modules;
  • Shadow DOM;
  • lazyStyleTag;
  • namespace-подходы.

Сравнение injectType

injectType Особенности
styleTag отдельный <style> на модуль
singletonStyleTag один общий <style>
lazyStyleTag ручное подключение
lazySingletonStyleTag singleton + ручное подключение

Наиболее распространённая конфигурация development

module.exports = {
  mode: 'development',

  devtool: 'eval-source-map',

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  },

  devServer: {
    hot: true
  }
};
Оглавление