style-loader

Вставить CSS в DOM.

Начало работы

Для начала вам необходимо установить style-loader.

npm install --save-dev style-loader

Рекомендуется комбинировать style-loader с css-loader.

Затем добавьте загрузчик в вашу конфигурацию webpack. Например:

style.css

body {
  background: green;
}

component.js

import './style.css';

webpack.config.js

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

Параметры

injectType

Тип: String По умолчанию: styleTag

Позволяет настроить способ вставки стилей в DOM.

Возможные значения:

• styleTag
• singletonStyleTag
• lazyStyleTag
• lazySingletonStyleTag
• linkTag

styleTag

Автоматически вставляет стили в DOM с помощью нескольких <style></style>. Это поведение по умолчанию.

component.js

import './styles.css';

Пример с локальными переменными (CSS Modules):

component-with-css-modules.js

import styles from './styles.css';

const divElement = document.createElement('div');
divElement.className = styles['my-class'];

Все локальные переменные (имена классов) хранятся в импортированном объекте.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // The `injectType`  option can be avoided because it is default behaviour
          { loader: 'style-loader', options: { injectType: 'styleTag' } },
          'css-loader',
        ],
      },
    ],
  },
};

Загрузчик вставляет стили следующим образом:

<style>
  .foo {
    color: red;
  }
</style>
<style>
  .bar {
    color: blue;
  }
</style>

singletonStyleTag

Автоматически вставляет стили в DOM с помощью одного <style></style>.

⚠ Карты исходного кода не работают.

component.js

import './styles.css';

component-with-css-modules.js

import styles from './styles.css';

const divElement = document.createElement('div');
divElement.className = styles['my-class'];

Все локальные переменные (имена классов) хранятся в импортированном объекте.

webpack.config.js

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

Загрузчик вставляет стили следующим образом:

<style>
  .foo {
    color: red;
  }
  .bar {
    color: blue;
  }
</style>

lazyStyleTag

Вставляет стили в DOM с помощью нескольких <style></style> по требованию. Мы рекомендуем использовать соглашение об именовании .lazy.css для ленивых стилей и .css для базового использования style-loader (аналогично другим типам файлов, например, .lazy.less и .less). Когда вы lazyStyleTag значение style-loader, загрузчик вставляет стили лениво, делая их доступными по требованию через style.use() / style.unuse().

⚠️ Поведение не определено, когда unuse вызывается чаще, чем use. Не делайте этого.

component.js

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

styles.use();
// For removing styles you can use
// styles.unuse();

component-with-css-modules.js

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

styles.use();

const divElement = document.createElement('div');
divElement.className = styles.locals['my-class'];

Все локальные переменные (имена классов) хранятся в свойстве locals импортированного объекта.

webpack.config.js

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

Загрузчик вставляет стили следующим образом:

<style>
  .foo {
    color: red;
  }
</style>
<style>
  .bar {
    color: blue;
  }
</style>

lazySingletonStyleTag

Вставляет стили в DOM с помощью одного <style></style> по требованию. Мы рекомендуем использовать соглашение об именовании .lazy.css для ленивых стилей и .css для базового использования style-loader (аналогично другим типам файлов, например, .lazy.less и .less). Когда вы lazySingletonStyleTag значение style-loader, загрузчик вставляет стили лениво, делая их доступными по требованию через style.use() / style.unuse().

⚠️ Карты исходного кода не работают.

⚠️ Поведение не определено, когда unuse вызывается чаще, чем use. Не делайте этого.

component.js

import styles from './styles.css';

styles.use();
// For removing styles you can use
// styles.unuse();

component-with-css-modules.js

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

styles.use();

const divElement = document.createElement('div');
divElement.className = styles.locals['my-class'];

Все локальные переменные (имена классов) хранятся в свойстве locals импортированного объекта.

webpack.config.js

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

Загрузчик генерирует следующее:

<style>
  .foo {
    color: red;
  }
  .bar {
    color: blue;
  }
</style>

linkTag

Вставляет стили в DOM с помощью нескольких <link rel="stylesheet" href="path/to/file.css">.

ℹ️ Загрузчик динамически вставит тег <link href="path/to/file.css" rel="stylesheet"> во время выполнения с помощью JavaScript. Если вы хотите включить статический тег <link href="path/to/file.css" rel="stylesheet">, используйте MiniCssExtractPlugin.

import './styles.css';
import './other-styles.css';

webpack.config.js

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

Загрузчик генерирует следующее:

<link rel="stylesheet" href="path/to/style.css" />
<link rel="stylesheet" href="path/to/other-styles.css" />

attributes

Тип: Object По умолчанию: {}

Если определено, style-loader добавит указанные атрибуты со значениями к элементу <style> / <link>.

component.js

import style from './file.css';

webpack.config.js

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

<style id="id"></style>

insert

Тип: String|Function По умолчанию: head

По умолчанию, style-loader добавляет элементы <style>/<link> в конец целевого элемента стиля, который представляет собой тег <head> страницы, если не указано иначе в insert. Это обеспечит приоритет CSS, созданному загрузчиком, над уже существующим CSS в целевом элементе. Вы можете использовать другие значения, если стандартное поведение не подходит, но мы не рекомендуем этого делать. Если вы нацеливаетесь на iframe, убедитесь, что у вас есть достаточные права доступа, стили будут вставлены в заголовок документа содержимого.

String

Позволяет настроить пользовательский селектор query selector для вставки стилей в DOM.

webpack.config.js

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

Новый элемент <style>/<link> будет вставлен в конец тега body.

Function

Позволяет переопределить стандартное поведение и вставить стили в любое положение.

⚠ Не забывайте, что этот код будет использоваться в браузере, и не все браузеры поддерживают последние возможности ECMA, такие как let, const, arrow function expression и т. д. Мы рекомендуем использовать только функции ECMA 5, но это зависит от того, какие браузеры вы хотите поддерживать. ⚠ Не забывайте, что некоторые методы DOM могут быть недоступны в старых браузерах, мы рекомендуем использовать только свойства DOM уровня 2, но это зависит от того, какие браузеры вы хотите поддерживать

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader',
            options: {
              insert: function insertAtTop(element) {
                var parent = document.querySelector('head');
                // eslint-disable-next-line no-underscore-dangle
                var lastInsertedElement =
                  window._lastElementInsertedByStyleLoader;

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

                // eslint-disable-next-line no-underscore-dangle
                window._lastElementInsertedByStyleLoader = element;
              },
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};

Вставить стили в начало тега head.

base

Этот параметр используется в основном как обходной путь для конфликтов CSS при использовании одного или нескольких плагинов DllPlugin. base позволяет предотвратить перезапись CSS приложения (или CSS DllPlugin2) CSS DllPlugin1, указав базу идентификатора модуля CSS, которая больше диапазона, используемого DllPlugin1, например:

webpack.dll1.config.js

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

webpack.dll2.config.js

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

webpack.app.config.js

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

Примеры

Карты исходного кода

Загрузчик автоматически вставляет карты исходного кода, если предыдущий загрузчик их выводит. Поэтому, чтобы сгенерировать карты исходного кода, установите параметр sourceMap в true для предыдущего загрузчика.

webpack.config.js

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

Nonce

Есть два способа работы с nonce:

• используя параметр attributes
• используя переменную __webpack_nonce__

⚠ Параметр attributes имеет приоритет над переменной __webpack_nonce__

attributes

component.js

import './style.css';

webpack.config.js

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

Загрузчик генерирует следующее:

<style nonce="12345678">
  .foo {
    color: red;
  }
</style>

__webpack_nonce__

create-nonce.js

__webpack_nonce__ = '12345678';

component.js

import './create-nonce.js';
import './style.css';

Альтернативный пример для require:

component.js

__webpack_nonce__ = '12345678';

require('./style.css');

webpack.config.js

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

Загрузчик генерирует следующее:

<style nonce="12345678">
  .foo {
    color: red;
  }
</style>

Вставить стили в начало

Вставляет стили в начало тега head.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader',
            options: {
              insert: function insertAtTop(element) {
                var parent = document.querySelector('head');
                var 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;
              },
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};

Вставить стили перед целевым элементом

Вставляет стили перед элементом #id.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader',
            options: {
              insert: function insertBeforeAt(element) {
                const parent = document.querySelector('head');
                const target = document.querySelector('#id');

                const lastInsertedElement =
                  window._lastElementInsertedByStyleLoader;

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

                window._lastElementInsertedByStyleLoader = element;
              },
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};

Содействие

Пожалуйста, потратьте немного времени на ознакомление с нашими рекомендациями по участию, если вы этого еще не сделали.

CONTRIBUTING

Лицензия

MIT