UNPKG

1.25 kBMarkdownView Raw
1# to-string loader for webpack
2
3## Usage
4
5```js
6let output = require('to-string!css!sass!./my.scss');
7// => returns sass rendered to CSS a string
8```
9
10Don't forget to polyfill `require` if you want to use it in node.
11
12See `webpack` documentation.
13
14## Use Case
15
16If you setup a SASS loader:
17
18```js
19{
20 test: /\.scss$/,
21 loaders: [
22 'css',
23 'sass'
24 ]
25},
26```
27
28then `require('./my.scss')` will return an `Array` object:
29
30```
310: Array[3]
32 0: 223
33 1: "html,↵body,↵ol,↵ul,↵li,↵p { margin: 0; padding: 0; }↵"
34 2: ""
35 length: 3
36i: (modules, mediaQuery) { .. }
37length: 1
38toString: toString()
39```
40
41In 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
43You 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
55or 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```