Adds CSS to the DOM by injecting a <style> tag
npm install style-loader --save-dev
require("style-loader!raw-loader!./file.css");
// => add rules in file.css to documentIt's recommended to combine it with the css-loader: require("style-loader!css-loader!./file.css").
It's also possible to add a URL instead of a CSS string:
require("style-loader/url!file-loader!./file.css");
// => add a <link rel="stylesheet"> to file.css to document(experimental)
When using local scope CSS the module exports the generated identifiers:
var style = require("style-loader!css-loader!./file.css");
style.placeholder1 === "z849f98ca812bc0d099a43e0f90184"var style = require("style-loader/useable!css-loader!./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 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. require('../style.css?insertAt=top').
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 (?singleton or ?-singleton).
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: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
],
},
{
test: /\.useable\.css$/,
use: [
{
loader: "style-loader",
options: {
useable: true
},
},
{ loader: "css-loader" },
],
},
],
},
}Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling npm test.
Tobias Koppers |
Kees Kluskens |
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent