1 | # style loader for webpack
|
2 |
|
3 | ## Usage
|
4 |
|
5 | [Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
|
6 |
|
7 | ### Simple API
|
8 |
|
9 | ``` javascript
|
10 | require("style!raw!./file.css");
|
11 | // => add rules in file.css to document
|
12 | ```
|
13 |
|
14 | It's recommended to combine it with the [`css-loader`](https://github.com/webpack/css-loader): `require("style!css!./file.css")`.
|
15 |
|
16 | It also possible to add a URL instead of a css string:
|
17 |
|
18 | ``` javascript
|
19 | require("style/url!file!./file.css");
|
20 | // => add a <link rel="stylesheet"> to file.css to document
|
21 | ```
|
22 |
|
23 | ### Placeholders
|
24 |
|
25 | (experimental)
|
26 |
|
27 | When using placeholders (see css-loader) the module exports the placeholders object:
|
28 |
|
29 | ``` js
|
30 | var styles = require("style!css!./file.css");
|
31 | style.placeholder1 === "z849f98ca812bc0d099a43e0f90184"
|
32 | ```
|
33 |
|
34 | ### Reference-counted API
|
35 |
|
36 | ``` javascript
|
37 | var style = require("style/useable!css!./file.css");
|
38 | style.use(); // = style.ref();
|
39 | style.unuse(); // = style.unref();
|
40 | ```
|
41 |
|
42 | 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`.
|
43 |
|
44 | Note: Behavior is undefined when `unuse`/`unref` is called more often than `use`/`ref`. Don't do that.
|
45 |
|
46 | ### Options
|
47 |
|
48 | #### `singleton`
|
49 |
|
50 | 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 # of style tags allowed on a page. You can enable or disable it with the singleton query parameter (`?singleton` or `?-singleton`).
|
51 |
|
52 | ## Recommended configuration
|
53 |
|
54 | 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`).
|
55 |
|
56 | So the recommended configuration for webpack is:
|
57 |
|
58 | ``` javascript
|
59 | {
|
60 | module: {
|
61 | loaders: [
|
62 | { test: /\.css$/, exclude: /\.useable\.css$/, loader: "style!css" },
|
63 | { test: /\.useable\.css$/, loader: "style/useable!css" }
|
64 | ]
|
65 | }
|
66 | }
|
67 | ```
|
68 |
|
69 |
|
70 | ## Install
|
71 |
|
72 | `npm install style-loader`
|
73 |
|
74 | ## License
|
75 |
|
76 | MIT (http://www.opensource.org/licenses/mit-license.php)
|