style-loader 0 npm

style loader module for webpack

style loader for webpack


Documentation: Using loaders

Simple API

javascript 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: javascript require("style/url!file!./file.css"); // => add a <link rel="stylesheet"> to file.css to document


(experimental) When using placeholders (see css-loader) the module exports the placeholders object: js var styles = require("style!css!./file.css"); style.placeholder1 === "z849f98ca812bc0d099a43e0f90184"

Reference-counted API

javascript 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 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).

Recommended configuration

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: javascript { 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: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.


npm install style-loader



Related Repositories



style loader module for webpack ...



module loader for bash scripts with `require` style ...



Isomorphic CSS style loader for Webpack ...



style loader module for webpack ...



Add a facebook news feed style animation for your placeholder views ...

Top Contributors

sokra diurnalist elsbree mako-taco tgriesser DenisIzmaylov undoZen danielberndt 2color verticalpalette aparticka zxcabs jhnns krrg deepsweet shama sirlancelot gryzzly nickdima SimenB


-   v0.13.0 zip tar
-   v0.12.4 zip tar
-   v0.12.3 zip tar
-   v0.12.2 zip tar
-   v0.12.1 zip tar
-   v0.12.0 zip tar
-   v0.11.0 zip tar
-   v0.10.2 zip tar
-   v0.10.1 zip tar
-   v0.10.0 zip tar
-   v0.9.0 zip tar