{"id":13459173,"url":"https://github.com/webpack-contrib/style-loader","last_synced_at":"2025-05-13T18:05:26.837Z","repository":{"id":2942032,"uuid":"3954886","full_name":"webpack-contrib/style-loader","owner":"webpack-contrib","description":"Style Loader","archived":false,"fork":false,"pushed_at":"2025-01-21T17:25:54.000Z","size":3486,"stargazers_count":1662,"open_issues_count":7,"forks_count":471,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-05-05T23:14:23.510Z","etag":null,"topics":["loader","stylesheets","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webpack-contrib.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"webpack"}},"created_at":"2012-04-07T01:05:23.000Z","updated_at":"2025-05-04T15:24:44.000Z","dependencies_parsed_at":"2023-12-05T05:28:01.904Z","dependency_job_id":"b7542f58-4d93-4985-a65e-f6ee5d16a83c","html_url":"https://github.com/webpack-contrib/style-loader","commit_stats":{"total_commits":395,"total_committers":101,"mean_commits":3.910891089108911,"dds":0.8354430379746836,"last_synced_commit":"869cd0695238afc19bbd6994dc5d9b56622d2331"},"previous_names":["webpack/style-loader"],"tags_count":55,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fstyle-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fstyle-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fstyle-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fstyle-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webpack-contrib","download_url":"https://codeload.github.com/webpack-contrib/style-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252590633,"owners_count":21772940,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["loader","stylesheets","webpack","webpack-loader"],"created_at":"2024-07-31T09:01:08.182Z","updated_at":"2025-05-05T23:14:38.637Z","avatar_url":"https://github.com/webpack-contrib.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n    \u003cimg width=\"200\" height=\"200\"\n      src=\"https://webpack.js.org/assets/icon-square-big.svg\"\u003e\n  \u003c/a\u003e\n  \u003ch1\u003eStyle Loader\u003c/h1\u003e\n\u003c/div\u003e\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![tests][tests]][tests-url]\n[![coverage][cover]][cover-url]\n[![discussion][discussion]][discussion-url]\n[![size][size]][size-url]\n\n# style-loader\n\nInject CSS into the DOM.\n\n## Getting Started\n\nTo begin, you'll need to install `style-loader`:\n\n```console\nnpm install --save-dev style-loader\n```\n\nor\n\n```console\nyarn add -D style-loader\n```\n\nor\n\n```console\npnpm add -D style-loader\n```\n\nIt's recommended to combine `style-loader` with the [`css-loader`](https://github.com/webpack-contrib/css-loader)\n\nThen add the loader to your `webpack` config. For example:\n\n**style.css**\n\n```css\nbody {\n  background: green;\n}\n```\n\n**component.js**\n\n```js\nimport \"./style.css\";\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\"style-loader\", \"css-loader\"],\n      },\n    ],\n  },\n};\n```\n\n## Security Warning\n\nThis loader is primarily meant for development. The default settings are not safe for production environments. See the [recommended example configuration](#recommend) and the section on [nonces](#nonce) for details.\n\n## Options\n\n- [**`injectType`**](#injecttype)\n- [**`attributes`**](#attributes)\n- [**`insert`**](#insert)\n- [**`styleTagTransform`**](#styleTagTransform)\n- [**`base`**](#base)\n- [**`esModule`**](#esmodule)\n\n### `injectType`\n\nType:\n\n```ts\ntype injectType =\n  | \"styleTag\"\n  | \"singletonStyleTag\"\n  | \"autoStyleTag\"\n  | \"lazyStyleTag\"\n  | \"lazySingletonStyleTag\"\n  | \"lazyAutoStyleTag\"\n  | \"linkTag\";\n```\n\nDefault: `styleTag`\n\nAllows to setup how styles will be injected into the DOM.\n\nPossible values:\n\n#### `styleTag`\n\nAutomatically injects styles into the DOM using multiple `\u003cstyle\u003e\u003c/style\u003e`. It is **default** behaviour.\n\n**component.js**\n\n```js\nimport \"./styles.css\";\n```\n\nExample with Locals (CSS Modules):\n\n**component-with-css-modules.js**\n\n```js\nimport * as styles from \"./styles.css\";\n\nconst divElement = document.createElement(\"div\");\ndivElement.className = styles[\"my-class\"];\n```\n\nAll local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup `modules` option for `css-loader`. For more information consult with `css-loader` [`documentation`](https://github.com/webpack-contrib/css-loader).\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          // The `injectType`  option can be avoided because it is default behaviour\n          { loader: \"style-loader\", options: { injectType: \"styleTag\" } },\n          {\n            loader: \"css-loader\",\n            // Uncomment it if you want to use CSS modules\n            // options: { modules: true }\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\nThe loader inject styles like:\n\n```html\n\u003cstyle\u003e\n  .foo {\n    color: red;\n  }\n\u003c/style\u003e\n\u003cstyle\u003e\n  .bar {\n    color: blue;\n  }\n\u003c/style\u003e\n```\n\n#### `singletonStyleTag`\n\nAutomatically injects styles into the DOM using one `\u003cstyle\u003e\u003c/style\u003e`.\n\n\u003e [!WARNING]\n\u003e\n\u003e Source maps do not work.\n\n**component.js**\n\n```js\nimport \"./styles.css\";\n```\n\n**component-with-css-modules.js**\n\n```js\nimport * as styles from \"./styles.css\";\n\nconst divElement = document.createElement(\"div\");\ndivElement.className = styles[\"my-class\"];\n```\n\nAll local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup `modules` option for `css-loader`. For more information consult with `css-loader` [`documentation`](https://github.com/webpack-contrib/css-loader).\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          {\n            loader: \"style-loader\",\n            options: { injectType: \"singletonStyleTag\" },\n          },\n          {\n            loader: \"css-loader\",\n            // Uncomment it if you want to use CSS modules\n            // options: { modules: true }\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\nThe loader inject styles like:\n\n```html\n\u003cstyle\u003e\n  .foo {\n    color: red;\n  }\n  .bar {\n    color: blue;\n  }\n\u003c/style\u003e\n```\n\n#### `autoStyleTag`\n\nWorks the same as a [`styleTag`](#styleTag), but if the code is executed in IE6-9, turns on the [`singletonStyleTag`](#singletonStyleTag) mode.\n\n#### `lazyStyleTag`\n\nInjects styles into the DOM using multiple `\u003cstyle\u003e\u003c/style\u003e` on demand.\nWe recommend following `.lazy.css` naming convention for lazy styles and the `.css` for basic `style-loader` usage (similar to other file types, i.e. `.lazy.less` and `.less`).\nWhen you `lazyStyleTag` value the `style-loader` injects the styles lazily making them useable on-demand via `style.use()` / `style.unuse()`.\n\n\u003e ⚠️ Behavior is undefined when `unuse` is called more often than `use`. Don't do that.\n\n**component.js**\n\n```js\nimport styles from \"./styles.lazy.css\";\n\nstyles.use();\n// For removing styles you can use\n// styles.unuse();\n```\n\n**component-with-css-modules.js**\n\n```js\nimport styles, { \"my-class\" as myClass } from \"./styles.lazy.css\";\n\nstyles.use();\n\nconst divElement = document.createElement(\"div\");\ndivElement.className = myClass;\n```\n\nAll local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup `modules` option for `css-loader`. For more information consult with `css-loader` [`documentation`](https://github.com/webpack-contrib/css-loader).\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        exclude: /\\.lazy\\.css$/i,\n        use: [\"style-loader\", \"css-loader\"],\n      },\n      {\n        test: /\\.lazy\\.css$/i,\n        use: [\n          { loader: \"style-loader\", options: { injectType: \"lazyStyleTag\" } },\n          {\n            loader: \"css-loader\",\n            // Uncomment it if you want to use CSS modules\n            // options: { modules: true }\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\nThe loader inject styles like:\n\n```html\n\u003cstyle\u003e\n  .foo {\n    color: red;\n  }\n\u003c/style\u003e\n\u003cstyle\u003e\n  .bar {\n    color: blue;\n  }\n\u003c/style\u003e\n```\n\n#### `lazySingletonStyleTag`\n\nInjects styles into the DOM using one `\u003cstyle\u003e\u003c/style\u003e` on demand.\nWe recommend following `.lazy.css` naming convention for lazy styles and the `.css` for basic `style-loader` usage (similar to other file types, i.e. `.lazy.less` and `.less`).\nWhen you `lazySingletonStyleTag` value the `style-loader` injects the styles lazily making them useable on-demand via `style.use()` / `style.unuse()`.\n\n\u003e ⚠️ Source maps do not work.\n\n\u003e ⚠️ Behavior is undefined when `unuse` is called more often than `use`. Don't do that.\n\n**component.js**\n\n```js\nimport styles from \"./styles.css\";\n\nstyles.use();\n// For removing styles you can use\n// styles.unuse();\n```\n\n**component-with-css-modules.js**\n\n```js\nimport styles, { \"my-class\" as myClass } from \"./styles.lazy.css\";\n\nstyles.use();\n\nconst divElement = document.createElement(\"div\");\ndivElement.className = myClass;\n```\n\nAll local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup `modules` option for `css-loader`. For more information consult with `css-loader` [`documentation`](https://github.com/webpack-contrib/css-loader).\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        exclude: /\\.lazy\\.css$/i,\n        use: [\"style-loader\", \"css-loader\"],\n      },\n      {\n        test: /\\.lazy\\.css$/i,\n        use: [\n          {\n            loader: \"style-loader\",\n            options: { injectType: \"lazySingletonStyleTag\" },\n          },\n          {\n            loader: \"css-loader\",\n            // Uncomment it if you want to use CSS modules\n            // options: { modules: true }\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\nThe loader generate this:\n\n```html\n\u003cstyle\u003e\n  .foo {\n    color: red;\n  }\n  .bar {\n    color: blue;\n  }\n\u003c/style\u003e\n```\n\n#### `lazyAutoStyleTag`\n\nWorks the same as a [`lazyStyleTag`](#lazyStyleTag), but if the code is executed in IE6-9, turns on the [`lazySingletonStyleTag`](#lazySingletonStyleTag) mode.\n\n#### `linkTag`\n\nInjects styles into the DOM using multiple `\u003clink rel=\"stylesheet\" href=\"path/to/file.css\"\u003e` .\n\n\u003e ℹ️ The loader will dynamically insert the `\u003clink href=\"path/to/file.css\" rel=\"stylesheet\"\u003e` tag at runtime via JavaScript. You should use [MiniCssExtractPlugin](https://webpack.js.org/plugins/mini-css-extract-plugin/) if you want to include a static `\u003clink href=\"path/to/file.css\" rel=\"stylesheet\"\u003e`.\n\n```js\nimport \"./styles.css\";\nimport \"./other-styles.css\";\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.link\\.css$/i,\n        use: [\n          { loader: \"style-loader\", options: { injectType: \"linkTag\" } },\n          { loader: \"file-loader\" },\n        ],\n      },\n    ],\n  },\n};\n```\n\nThe loader generate this:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"path/to/style.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"path/to/other-styles.css\" /\u003e\n```\n\n### `attributes`\n\nType:\n\n```ts\ntype attributes = HTMLAttributes;\n```\n\nDefault: `{}`\n\nIf defined, the `style-loader` will attach given attributes with their values on `\u003cstyle\u003e` / `\u003clink\u003e` element.\n\n**component.js**\n\n```js\nimport \"./file.css\";\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          { loader: \"style-loader\", options: { attributes: { id: \"id\" } } },\n          { loader: \"css-loader\" },\n        ],\n      },\n    ],\n  },\n};\n```\n\n```html\n\u003cstyle id=\"id\"\u003e\u003c/style\u003e\n```\n\n### `insert`\n\nType:\n\n```ts\ntype insert = string;\n```\n\nDefault: `head`\n\nBy default, the `style-loader` appends `\u003cstyle\u003e`/`\u003clink\u003e` elements to the end of the style target, which is the `\u003chead\u003e` tag of the page unless specified by `insert`.\nThis will cause CSS created by the loader to take priority over CSS already present in the target.\nYou can use other values if the standard behavior is not suitable for you, but we do not recommend doing this.\nIf you target an [iframe](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure you have sufficient access rights, the styles will be injected into the content document head.\n\n#### `Selector`\n\nAllows to setup custom [query selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) where styles inject into the DOM.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          {\n            loader: \"style-loader\",\n            options: {\n              insert: \"body\",\n            },\n          },\n          \"css-loader\",\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### `Absolute path to function`\n\nAllows to setup absolute path to custom function that allows to override default behavior and insert styles at any position.\n\n\u003e [!WARNING]\n\u003e\n\u003e Do not forget that this code will be used in the browser and not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc. We recommend using [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) for support latest ECMA features.\n\n\u003e [!WARNING]\n\u003e\n\u003e Do not forget that some DOM methods may not be available in older browsers, we recommended use only [DOM core level 2 properties](https://caniuse.com/#search=DOM%20Core), but it is depends what browsers you want to support\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          {\n            loader: \"style-loader\",\n            options: {\n              insert: require.resolve(\"./path-to-insert-module\"),\n            },\n          },\n          \"css-loader\",\n        ],\n      },\n    ],\n  },\n};\n```\n\nA new `\u003cstyle\u003e`/`\u003clink\u003e` elements will be inserted into at bottom of `body` tag.\n\nExamples:\n\nInsert styles at top of `head` tag:\n\n**insert-function.js**\n\n```js\nfunction insertAtTop(element) {\n  var parent = document.querySelector(\"head\");\n  // eslint-disable-next-line no-underscore-dangle\n  var lastInsertedElement = window._lastElementInsertedByStyleLoader;\n\n  if (!lastInsertedElement) {\n    parent.insertBefore(element, parent.firstChild);\n  } else if (lastInsertedElement.nextSibling) {\n    parent.insertBefore(element, lastInsertedElement.nextSibling);\n  } else {\n    parent.appendChild(element);\n  }\n\n  // eslint-disable-next-line no-underscore-dangle\n  window._lastElementInsertedByStyleLoader = element;\n}\n\nmodule.exports = insertAtTop;\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          {\n            loader: \"style-loader\",\n            options: {\n              insert: require.resolve(\"./insert-function\"),\n            },\n          },\n          \"css-loader\",\n        ],\n      },\n    ],\n  },\n};\n```\n\nYou can pass any parameters to `style.use(options)` and this value will be passed to `insert` and `styleTagTransform` functions.\n\n**insert-function.js**\n\n```js\nfunction insertIntoTarget(element, options) {\n  var parent = options.target || document.head;\n\n  parent.appendChild(element);\n}\n\nmodule.exports = insertIntoTarget;\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          {\n            loader: \"style-loader\",\n            options: {\n              injectType: \"lazyStyleTag\",\n              // Do not forget that this code will be used in the browser and\n              // not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc,\n              // we recommend use only ECMA 5 features,\n              // but it depends what browsers you want to support\n              insert: require.resolve(\"./insert-function.js\"),\n            },\n          },\n          \"css-loader\",\n        ],\n      },\n    ],\n  },\n};\n```\n\nInsert styles to the provided element or to the `head` tag if target isn't provided. Now you can inject styles into Shadow DOM (or any other element).\n\n**custom-square.css**\n\n```css\ndiv {\n  width: 50px;\n  height: 50px;\n  background-color: red;\n}\n```\n\n**custom-square.js**\n\n```js\nimport customSquareStyles from \"./custom-square.css\";\n\nclass CustomSquare extends HTMLElement {\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: \"open\" });\n\n    const divElement = document.createElement(\"div\");\n\n    divElement.textContent = \"Text content.\";\n\n    this.shadowRoot.appendChild(divElement);\n\n    customSquareStyles.use({ target: this.shadowRoot });\n\n    // You can override injected styles\n    const bgPurple = new CSSStyleSheet();\n    const width = this.getAttribute(\"w\");\n    const height = this.getAttribute(\"h\");\n\n    bgPurple.replace(`div { width: ${width}px; height: ${height}px; }`);\n\n    this.shadowRoot.adoptedStyleSheets = [bgPurple];\n\n    // `divElement` will have `100px` width, `100px` height and `red` background color\n  }\n}\n\ncustomElements.define(\"custom-square\", CustomSquare);\n\nexport default CustomSquare;\n```\n\n### `styleTagTransform`\n\nType:\n\n```ts\ntype styleTagTransform = string;\n```\n\nDefault: `undefined`\n\n#### `string`\n\nAllows to setup absolute path to custom function that allows to override default behavior styleTagTransform.\n\n\u003e [!WARNING]\n\u003e\n\u003e Do not forget that this code will be used in the browser and not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc, we recommend use only ECMA 5 features, but it is depends what browsers you want to support\n\n\u003e [!WARNING]\n\u003e\n\u003e Do not forget that some DOM methods may not be available in older browsers, we recommended use only [DOM core level 2 properties](https://caniuse.com/#search=DOM%20Core), but it depends what browsers you want to support\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          {\n            loader: \"style-loader\",\n            options: {\n              injectType: \"styleTag\",\n              styleTagTransform: require.resolve(\"style-tag-transform-code\"),\n            },\n          },\n          \"css-loader\",\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `base`\n\n```ts\ntype base = number;\n```\n\nThis setting is primarily used as a workaround for [css clashes](https://github.com/webpack-contrib/style-loader/issues/163) when using one or more [DllPlugin](https://robertknight.me.uk/posts/webpack-dll-plugins/)'s. `base` allows you to prevent either the _app_'s css (or _DllPlugin2_'s css) from overwriting _DllPlugin1_'s css by specifying a css module id base which is greater than the range used by _DllPlugin1_ e.g.:\n\n**webpack.dll1.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\"style-loader\", \"css-loader\"],\n      },\n    ],\n  },\n};\n```\n\n**webpack.dll2.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          { loader: \"style-loader\", options: { base: 1000 } },\n          \"css-loader\",\n        ],\n      },\n    ],\n  },\n};\n```\n\n**webpack.app.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          { loader: \"style-loader\", options: { base: 2000 } },\n          \"css-loader\",\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `esModule`\n\nType:\n\n```ts\ntype esModule = boolean;\n```\n\nDefault: `true`\n\nBy default, `style-loader` generates JS modules that use the ES modules syntax.\nThere are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).\n\nYou can enable a CommonJS modules syntax using:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        loader: \"style-loader\",\n        options: {\n          esModule: false,\n        },\n      },\n    ],\n  },\n};\n```\n\n## Examples\n\n### Recommend\n\nFor `production` builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.\nThis can be achieved by using the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin), because it creates separate css files.\nFor `development` mode (including `webpack-dev-server`) you can use `style-loader`, because it injects CSS into the DOM using multiple `\u003cstyle\u003e\u003c/style\u003e` and works faster.\n\n\u003e [!WARNING]\n\u003e\n\u003e Do not use together `style-loader` and `mini-css-extract-plugin`.\n\n**webpack.config.js**\n\n```js\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\nconst devMode = process.env.NODE_ENV !== \"production\";\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(sa|sc|c)ss$/,\n        use: [\n          devMode ? \"style-loader\" : MiniCssExtractPlugin.loader,\n          \"css-loader\",\n          \"postcss-loader\",\n          \"sass-loader\",\n        ],\n      },\n    ],\n  },\n  plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),\n};\n```\n\n### Named export for CSS Modules\n\n\u003e [!WARNING]\n\u003e\n\u003e It is not allowed to use JavaScript reserved words in css class names.\n\n\u003e [!WARNING]\n\u003e\n\u003e Options `esModule` and `modules.namedExport` in `css-loader` should be enabled (by default for `css-loader@7` it is true).\n\n**styles.css**\n\n```css\n.fooBaz {\n  color: red;\n}\n.bar {\n  color: blue;\n}\n.my-class {\n  color: green;\n}\n```\n\n**index.js**\n\n```js\nimport { fooBaz, bar, \"my-class\" as myClass } from \"./styles.css\";\n\nconsole.log(fooBaz, bar, myClass);\n```\n\nOr:\n\n**index.js**\n\n```js\nimport * as styles from \"./styles.css\";\n\nconsole.log(styles.fooBaz, styles.bar, styles[\"my-class\"]);\n```\n\nYou can enable a ES module named export using:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: \"style-loader\",\n          },\n          {\n            loader: \"css-loader\",\n            options: {\n              modules: {\n                namedExport: true,\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### Source maps\n\nThe loader automatically inject source maps when previous loader emit them.\nTherefore, to generate source maps, set the `sourceMap` option to `true` for the previous loader.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          \"style-loader\",\n          { loader: \"css-loader\", options: { sourceMap: true } },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### Nonce\n\nIf you are using a [Content Security Policy](https://www.w3.org/TR/CSP3/) (CSP), the injected code will usually be blocked. A workaround is to use a nonce. Note, however, that using a nonce significantly reduces the protection provided by the CSP. You can read more about the security impact in [the specification](https://www.w3.org/TR/CSP3/#security-considerations). The better solution is not to use this loader in production.\n\nThere are two ways to work with `nonce`:\n\n- using the `attributes` option\n- using the `__webpack_nonce__` variable\n\n\u003e [!WARNING]\n\u003e\n\u003e the `attributes` option takes precedence over the `__webpack_nonce__` variable\n\n#### `attributes`\n\n**component.js**\n\n```js\nimport \"./style.css\";\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          {\n            loader: \"style-loader\",\n            options: {\n              attributes: {\n                nonce: \"12345678\",\n              },\n            },\n          },\n          \"css-loader\",\n        ],\n      },\n    ],\n  },\n};\n```\n\nThe loader generate:\n\n```html\n\u003cstyle nonce=\"12345678\"\u003e\n  .foo {\n    color: red;\n  }\n\u003c/style\u003e\n```\n\n#### `__webpack_nonce__`\n\n**create-nonce.js**\n\n```js\n__webpack_nonce__ = \"12345678\";\n```\n\n**component.js**\n\n```js\nimport \"./create-nonce.js\";\nimport \"./style.css\";\n```\n\nAlternative example for `require`:\n\n**component.js**\n\n```js\n__webpack_nonce__ = \"12345678\";\n\nrequire(\"./style.css\");\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\"style-loader\", \"css-loader\"],\n      },\n    ],\n  },\n};\n```\n\nThe loader generate:\n\n```html\n\u003cstyle nonce=\"12345678\"\u003e\n  .foo {\n    color: red;\n  }\n\u003c/style\u003e\n```\n\n#### Insert styles at top\n\nInsert styles at top of `head` tag.\n\n**insert-function.js**\n\n```js\nfunction insertAtTop(element) {\n  var parent = document.querySelector(\"head\");\n  var lastInsertedElement = window._lastElementInsertedByStyleLoader;\n\n  if (!lastInsertedElement) {\n    parent.insertBefore(element, parent.firstChild);\n  } else if (lastInsertedElement.nextSibling) {\n    parent.insertBefore(element, lastInsertedElement.nextSibling);\n  } else {\n    parent.appendChild(element);\n  }\n\n  window._lastElementInsertedByStyleLoader = element;\n}\n\nmodule.exports = insertAtTop;\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          {\n            loader: \"style-loader\",\n            options: {\n              insert: require.resolve(\"./insert-function.js\"),\n            },\n          },\n          \"css-loader\",\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### Insert styles before target element\n\nInserts styles before `#id` element.\n\n**insert-function.js**\n\n```js\nfunction insertBeforeAt(element) {\n  const parent = document.querySelector(\"head\");\n  const target = document.querySelector(\"#id\");\n\n  const lastInsertedElement = window._lastElementInsertedByStyleLoader;\n\n  if (!lastInsertedElement) {\n    parent.insertBefore(element, target);\n  } else if (lastInsertedElement.nextSibling) {\n    parent.insertBefore(element, lastInsertedElement.nextSibling);\n  } else {\n    parent.appendChild(element);\n  }\n\n  window._lastElementInsertedByStyleLoader = element;\n}\n\nmodule.exports = insertBeforeAt;\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          {\n            loader: \"style-loader\",\n            options: {\n              insert: require.resolve(\"./insert-function.js\"),\n            },\n          },\n          \"css-loader\",\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### Custom Elements (Shadow DOM)\n\nYou can define custom target for your styles for the `lazyStyleTag` type.\n\n**insert-function.js**\n\n```js\nfunction insertIntoTarget(element, options) {\n  var parent = options.target || document.head;\n\n  parent.appendChild(element);\n}\n\nmodule.exports = insertIntoTarget;\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          {\n            loader: \"style-loader\",\n            options: {\n              injectType: \"lazyStyleTag\",\n              // Do not forget that this code will be used in the browser and\n              // not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc,\n              // we recommend use only ECMA 5 features,\n              // but it is depends what browsers you want to support\n              insert: require.resolve(\"./insert-function.js\"),\n            },\n          },\n          \"css-loader\",\n        ],\n      },\n    ],\n  },\n};\n```\n\nInsert styles to the provided element or to the `head` tag if target isn't provided.\n\n**custom-square.css**\n\n```css\ndiv {\n  width: 50px;\n  height: 50px;\n  background-color: red;\n}\n```\n\n**custom-square.js**\n\n```js\nimport customSquareStyles from \"./custom-square.css\";\n\nclass CustomSquare extends HTMLElement {\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: \"open\" });\n\n    const divElement = document.createElement(\"div\");\n\n    divElement.textContent = \"Text content.\";\n\n    this.shadowRoot.appendChild(divElement);\n\n    customSquareStyles.use({ target: this.shadowRoot });\n\n    // You can override injected styles\n    const bgPurple = new CSSStyleSheet();\n    const width = this.getAttribute(\"w\");\n    const height = this.getAttribute(\"h\");\n\n    bgPurple.replace(`div { width: ${width}px; height: ${height}px; }`);\n\n    this.shadowRoot.adoptedStyleSheets = [bgPurple];\n\n    // `divElement` will have `100px` width, `100px` height and `red` background color\n  }\n}\n\ncustomElements.define(\"custom-square\", CustomSquare);\n\nexport default CustomSquare;\n```\n\n## Contributing\n\nPlease take a moment to read our contributing guidelines if you haven't yet done so.\n\n[CONTRIBUTING](./.github/CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/style-loader.svg\n[npm-url]: https://npmjs.com/package/style-loader\n[node]: https://img.shields.io/node/v/style-loader.svg\n[node-url]: https://nodejs.org\n[tests]: https://github.com/webpack-contrib/style-loader/workflows/style-loader/badge.svg\n[tests-url]: https://github.com/webpack-contrib/style-loader/actions\n[cover]: https://codecov.io/gh/webpack-contrib/style-loader/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack-contrib/style-loader\n[discussion]: https://img.shields.io/github/discussions/webpack/webpack\n[discussion-url]: https://github.com/webpack/webpack/discussions\n[size]: https://packagephobia.now.sh/badge?p=style-loader\n[size-url]: https://packagephobia.now.sh/result?p=style-loader\n","funding_links":["https://opencollective.com/webpack"],"categories":["JavaScript","Plugins"],"sub_categories":["Rspack Loaders"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fstyle-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebpack-contrib%2Fstyle-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fstyle-loader/lists"}