Adds CSS to the DOM by injecting a `` tag. -``` javascript -var style = require("style-loader!css-loader!./file.css"); -style.placeholder1 === "z849f98ca812bc0d099a43e0f90184" +```js +import url from 'file.css' ``` -### Reference-counted API +**webpack.config.js** +```js +{ + module: { + rules: [ + { + test: /\.css$/, + use: [ + { loader: "style-loader/url" }, + { loader: "file-loader" } + ] + } + ] + } +} +``` -``` javascript -var style = require("style-loader/useable!css-loader!./file.css"); -style.use(); // = style.ref(); -style.unuse(); // = style.unref(); +```html + ``` -Styles are not added on `require`, but instead on call to `use`/`ref`. Styles are removed from page if `unuse`/`unref` is called exactly as often as `use`/`ref`. +> :information_source: Source maps and assets referenced with `url`: when style loader is used with `{ options: { sourceMap: true } }` option, the CSS modules will be generated as `Blob`s, so relative paths don't work (they would be relative to `chrome:blob` or `chrome:devtools`). In order for assets to maintain correct paths setting `output.publicPath` property of webpack configuration must be set, so that absolute paths are generated. Alternatively you can enable the `convertToAbsoluteUrls` option mentioned above. -Note: Behavior is undefined when `unuse`/`unref` is called more often than `use`/`ref`. Don't do that. +### `Useable` -### Options +By convention the `Reference Counter API` should be bound to `.useable.css` and the `.css` should be loaded with basic `style-loader` usage.(similar to other file types, i.e. `.useable.less` and `.less`). -#### `insertAt` +**webpack.config.js** +```js +{ + module: { + rules: [ + { + test: /\.css$/, + use: [ + { loader: "style-loader" }, + { loader: "css-loader" }, + ], + }, + { + test: /\.useable\.css$/, + use: [ + { + loader: "style-loader/useable" + }, + { loader: "css-loader" }, + ], + }, + ], + }, +} +``` -By default, the style-loader appends ``| +|**`transform`** |`{Function}`|`false`|Transform/Conditionally load CSS by passing a transform/condition function| +|**`insertAt`**|`{String}`|`bottom`|Inserts `` at the given position| +|**`insertInto`**|`{String}`|`
`|Inserts `` into the given position| +|**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps| +|**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Coverts relative URLs to absolute urls, when source maps are enabled| -A `transform` is a function that can modify the css just before it is loaded into the page by the style-loader. -This function will be called on the css that is about to be loaded and the return value of the function will be loaded into the page instead of the original css. -If the return value of the `transform` function is falsy, the css will not be loaded into the page at all. +### `base` -Usage: +This 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.github.io/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.: -**webpack.config.js** +**webpack.dll1.config.js** ```js { - loader: 'style-loader' - options: { - transform: 'path/to/transformCSS' - } + test: /\.css$/, + use: [ + 'style-loader', + 'css-loader' + ] } ``` -**transformCSS.js** +**webpack.dll2.config.js** ```js -module.exports = function(originalCss) { - // Here we can change the original css - const transformed = originalCss.replace('.classNameA', '.classNameB'); - return transformed; +{ + test: /\.css$/, + use: [ + { loader: 'style-loader', options: { base: 1000 } }, + 'css-loader' + ] } ``` -Example of conditional loading of css: - -**conditionalCSS.js** -```js -module.exports = function (css) { - // If the condition is matched load [and transform] the CSS - if (css.includes('something I want to check')) { - return css; - } - // If a falsy value is returned, the CSS won't be loaded - return false +**webpack.app.config.js** +``` +{ + test: /\.css$/, + use: [ + { loader: 'style-loader', options: { base: 2000 } }, + 'css-loader' + ] } ``` -#### `attrs` +### `attrs` If defined, style-loader will attach given attributes with their values on ` +``` + +#### `Url` + +**component.js** +```js +import link from './file.css' ``` + +**webpack.config.js** +```js { test: /\.css$/, - use: [ - 'style-loader', - 'css-loader' + use: [ + { loader: 'style-loader/url', options: { attrs: { id: 'id' } } } + { loader: 'file-loader' } ] } ``` -* webpack.dll2.config.js + +### `transform` + +A `transform` is a function that can modify the css just before it is loaded into the page by the style-loader. +This function will be called on the css that is about to be loaded and the return value of the function will be loaded into the page instead of the original css. +If the return value of the `transform` function is falsy, the css will not be loaded into the page at all. + +**webpack.config.js** +```js +{ + loader: 'style-loader' + options: { + transform: 'path/to/transform.js' + } +} +``` + +**transform.js** +```js +module.exports = function (css) { + // Here we can change the original css + const transformed = css.replace('.classNameA', '.classNameB') + + return transformed +} ``` + +#### `Conditional` + +**webpack.config.js** +```js { - test: /\.css$/, - use: [ - { loader: 'style-loader', options: { base: 1000 } }, - 'css-loader' - ] + loader: 'style-loader' + options: { + transform: 'path/to/conditional.js' + } +} +``` + +**conditional.js** +```js +module.exports = function (css) { + // If the condition is matched load [and transform] the CSS + if (css.includes('something I want to check')) { + return css; + } + // If a falsy value is returned, the CSS won't be loaded + return false } ``` -* webpack.app.config.js + +### `insertAt` + +By default, the style-loader appends `