1 | # to-string loader for webpack
|
2 |
|
3 | ## Usage
|
4 |
|
5 | ```js
|
6 | let output = require('to-string!css!sass!./my.scss');
|
7 | // => returns sass rendered to CSS a string
|
8 | ```
|
9 |
|
10 | Don't forget to polyfill `require` if you want to use it in node.
|
11 |
|
12 | See `webpack` documentation.
|
13 |
|
14 | ## Use Case
|
15 |
|
16 | If you setup a SASS loader:
|
17 |
|
18 | ```js
|
19 | {
|
20 | test: /\.scss$/,
|
21 | loaders: [
|
22 | 'css',
|
23 | 'sass'
|
24 | ]
|
25 | },
|
26 | ```
|
27 |
|
28 | then `require('./my.scss')` will return an `Array` object:
|
29 |
|
30 | ```
|
31 | 0: Array[3]
|
32 | 0: 223
|
33 | 1: "html,↵body,↵ol,↵ul,↵li,↵p { margin: 0; padding: 0; }↵"
|
34 | 2: ""
|
35 | length: 3
|
36 | i: (modules, mediaQuery) { .. }
|
37 | length: 1
|
38 | toString: toString()
|
39 | ```
|
40 |
|
41 | In some cases (e.g. Angular2 [@View styles definition](https://github.com/angular/angular/blob/2e4a2a0e5a2fb5b5c531f16db88d00423ea582fc/modules/angular2/src/core/annotations_impl/view.ts#L58)) you need to have style as a string.
|
42 |
|
43 | You can cast the require output to a string, e.g.
|
44 |
|
45 | ```js
|
46 | @View({
|
47 | directives: [RouterOutlet, RouterLink],
|
48 | template: require('./app.html'),
|
49 | styles: [
|
50 | require('./app.scss').toString()
|
51 | ]
|
52 | })
|
53 | ```
|
54 |
|
55 | or you can use `to-string` loader that will do that for you:
|
56 |
|
57 | ```js
|
58 | {
|
59 | test: /\.scss$/,
|
60 | loaders: [
|
61 | 'to-string',
|
62 | 'css',
|
63 | 'sass'
|
64 | ]
|
65 | },
|
66 | ```
|