require("style!raw!./file.css");
// => add rules in file.css to document
It's recommended to combine it with the css-loader
: require("style!css!./file.css")
.
It also possible to add a URL instead of a css string:
require("style/url!file!./file.css");
// => add a <link rel="stlyesheet"> to file.css to document
var style = require("style/useable!css!./file.css");
style.use(); // = style.ref();
style.unuse(); // = style.unref();
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
.
Note: Behavior is undefined when unuse
/unref
is called more often than use
/ref
. Don't do that.
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. .useable.less
and .less
).
So the recommended configuration for webpack is:
{
module: {
loaders: [
{ test: /\.css$/, exclude: /\.useable\.css$/, loader: "style!css" },
{ test: /\.useable\.css$/, loader: "style/useable!css" }
]
}
}