Source maps and assets referenced with url: when style loader is used with { options: { sourceMap: true } } option, the CSS modules will be generated as Blobs, 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.

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.

insertAt

By default, the style-loader appends elements to the end of the style target, which is the tag of the page unless specified by insertInto. This will cause CSS created by the loader to take priority over CSS already present in the target. To insert style elements at the beginning of the target, set this query parameter to 'top', e.g

webpack.config.js

{
loader:'style-loader',
options: {
insertAt:'top'
}
}

A new element can be inserted before a specific element by passing an object, e.g.

webpack.config.js

{
loader:'style-loader',
options: {
insertAt: {
before:'#id'
}
}
}

insertInto

By default, the style-loader inserts the elements into the tag of the page. If you want the tags to be inserted somewhere else you can specify a CSS selector for that element here. If you target an IFrame make sure you have sufficient access rights, the styles will be injected into the content document head.

You can also pass function to override default behavior and insert styles in your container, e.g

singleton

If defined, the style-loader will reuse a single element, instead of adding/removing individual elements for each required module.

This option is on by default in IE9, which has strict limitations on the number of style tags allowed on a page. You can enable or disable it with the singleton option.

webpack.config.js

{
loader:'style-loader',
options: {
singleton:true
}
}

sourceMap

Enable/Disable source map loading

webpack.config.js

{
loader:'style-loader',
options: {
sourceMap:true
}
}

convertToAbsoluteUrls

If convertToAbsoluteUrls and sourceMaps are both enabled, relative urls will be converted to absolute urls right before the css is injected into the page. This resolves an issue where relative resources fail to load when source maps are enabled. You can enable it with the convertToAbsoluteUrls option.