style loader module for webpack
require"style!raw!./file.css";// => add rules in file.css to document
It's recommended to combine it with the
It's also possible to add a URL instead of a CSS string:
require"style/url!file!./file.css";// => add a <link rel="stylesheet"> to file.css to document
When using local scope CSS the module exports the generated identifiers:
var style = require"style!css!./file.css";styleplaceholder1 === "z849f98ca812bc0d099a43e0f90184"
var style = require"style/useable!css!./file.css";styleuse; // = style.ref();styleunuse; // = style.unref();
Styles are not added on
require, but instead on call to
ref. Styles are removed from page if
unref is called exactly as often as
Note: Behavior is undefined when
unref is called more often than
ref. Don't do that.
By default, the style-loader appends
<style> elements to the end of the
<head> tag of the page. This will cause CSS created by the loader to take priority over CSS already present in the document head. To insert style elements at the beginning of the head, set this query parameter to 'top', e.g.
If defined, the style-loader will re-use a single
<style> element, instead of adding/removing individual elements for each required module. Note: 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 query parameter (
By convention the reference-counted API should be bound to
.useable.css and the simple API to
.css (similar to other file types, i.e.
So the recommended configuration for webpack is:
module:loaders:test: /\.css$/ exclude: /\.useable\.css$/ loader: "style!css"test: /\.useable\.css$/ loader: "style/useable!css"
Note about source maps support and assets referenced with
url: when style loader is used with ?sourceMap option, the CSS modules will be generated as
Blobs, so relative paths don't work (they would be relative to
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.
npm install style-loader