\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![deps][deps]][deps-url]\n[![tests][tests]][tests-url]\n[![coverage][cover]][cover-url]\n[![chat][chat]][chat-url]\n[![size][size]][size-url]\n\n# 7-style-loader\n\n**This is a forked version of style-loader, modified for seven-modules**\n\nNew Feature:\n1. Extend the ability of attributes, you can use \"[moduleName]\" and \"[moduleVersion]\" template string in style tag attribute now.\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\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## Options\n\n| Name | Type | Default | Description |\n| :-----------------------------: | :------------------: | :--------: | :------------------------------------------------------- |\n| [**`injectType`**](#injecttype) | `{String}` | `styleTag` | Allows to setup how styles will be injected into the DOM |\n| [**`attributes`**](#attributes) | `{Object}` | `{}` | Adds custom attributes to tag |\n| [**`insert`**](#insert) | `{String\\|Function}` | `head` | Inserts tag at the given position into the DOM |\n| [**`base`**](#base) | `{Number}` | `true` | Sets module ID base (DLLPlugin) |\n| [**`esModule`**](#esmodule) | `{Boolean}` | `false` | Use ES modules syntax |\n\n### `injectType`\n\nType: `String`\nDefault: `styleTag`\n\nAllows to setup how styles will be injected into the DOM.\n\nPossible values:\n\n- `styleTag`\n- `singletonStyleTag`\n- `lazyStyleTag`\n- `lazySingletonStyleTag`\n- `linkTag`\n\n#### `styleTag`\n\nAutomatically injects styles into the DOM using multiple ``. 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 styles from './styles.css';\n\nconst divElement = document.createElement('div');\ndivElement.className = styles['my-class'];\n```\n\nAll locals (class names) stored in imported object.\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 'css-loader',\n ],\n },\n ],\n },\n};\n```\n\nThe loader inject styles like:\n\n```html\n\n\n```\n\n#### `singletonStyleTag`\n\nAutomatically injects styles into the DOM using one ``.\n\n> ⚠ 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 styles from './styles.css';\n\nconst divElement = document.createElement('div');\ndivElement.className = styles['my-class'];\n```\n\nAll locals (class names) stored in imported object.\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 'css-loader',\n ],\n },\n ],\n },\n};\n```\n\nThe loader inject styles like:\n\n```html\n\n```\n\n#### `lazyStyleTag`\n\nInjects styles into the DOM using multiple `` 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> ⚠️ 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 from './styles.lazy.css';\n\nstyles.use();\n\nconst divElement = document.createElement('div');\ndivElement.className = styles.locals['my-class'];\n```\n\nAll locals (class names) stored in `locals` property of imported object.\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 'css-loader',\n ],\n },\n ],\n },\n};\n```\n\nThe loader inject styles like:\n\n```html\n\n\n```\n\n#### `lazySingletonStyleTag`\n\nInjects styles into the DOM using one `` 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> ⚠️ Source maps do not work.\n\n> ⚠️ 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 from './styles.lazy.css';\n\nstyles.use();\n\nconst divElement = document.createElement('div');\ndivElement.className = styles.locals['my-class'];\n```\n\nAll locals (class names) stored in `locals` property of imported object.\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 'css-loader',\n ],\n },\n ],\n },\n};\n```\n\nThe loader generate this:\n\n```html\n\n```\n\n#### `linkTag`\n\nInjects styles into the DOM using multiple `` .\n\n> ℹ️ The loader will dynamically insert the `` 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 ``.\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\n\n```\n\n### `attributes`\n\nType: `Object`\nDefault: `{}`\n\nIf defined, the `style-loader` will attach given attributes with their values on `\n```\n\n### `insert`\n\nType: `String|Function`\nDefault: `head`\n\nBy default, the `style-loader` appends `\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\n```\n\n#### Insert styles at top\n\nInserts styles at top of `head` tag.\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: function insertAtTop(element) {\n var parent = document.querySelector('head');\n var lastInsertedElement =\n 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 },\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**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: function insertBeforeAt(element) {\n const parent = document.querySelector('head');\n const target = document.querySelector('#id');\n\n const lastInsertedElement =\n 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 },\n },\n 'css-loader',\n ],\n },\n ],\n },\n};\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[deps]: https://david-dm.org/webpack-contrib/style-loader.svg\n[deps-url]: https://david-dm.org/webpack-contrib/style-loader\n[tests]: https://dev.azure.com/webpack-contrib/style-loader/_apis/build/status/webpack-contrib.style-loader?branchName=master\n[tests-url]: https://dev.azure.com/webpack-contrib/style-loader/_build/latest?definitionId=18&branchName=master\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[chat]: https://badges.gitter.im/webpack/webpack.svg\n[chat-url]: https://gitter.im/webpack/webpack\n[size]: https://packagephobia.now.sh/badge?p=style-loader\n[size-url]: https://packagephobia.now.sh/result?p=style-loader\n","readmeFilename":"README.md"}
![](\"https://webpack.js.org/assets/icon-square-big.svg\"){kind=icon}
\n \n