1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
rollup-plugin-sass [](https://github.com/elycruz/rollup-plugin-sass/actions/workflows/build-and-test.yml) [](https://www.npmjs.com/package/rollup-plugin-sass) [](https://www.npmjs.com/package/rollup-plugin-sass) [](https://opensource.org/licenses/MIT) [](https://coveralls.io/github/elycruz/rollup-plugin-sass?branch=main)
=====
## Installation
```bash
npm install rollup-plugin-sass -D
```
## Usage
```js
// rollup.config.js
import sass from 'rollup-plugin-sass';
export default {
input: 'index.js',
output: {
file: 'bundle.js',
format: 'cjs',
},
plugins: [
sass()
]
}
```
#### rollup.config.ts
Add `allowSyntheticDefaultImports`, or `esModuleInterop` (enables `allowSyntheticDefaultImports`), to tsconfig.json:
```json
{
"compilerOptions": {
"esModuleInterOp": true
}
}
```
Reference: (https://www.typescriptlang.org/tsconfig#esModuleInterop)
Write rollup.config.ts:
```typescript
// rollup.config.ts
import sass from 'rollup-plugin-sass';
// ...
```
Profit.
## Options
### `output`
+ Type: `Boolean|String|Function` _(default: false)_
```js
sass({
// Default behaviour disable output
output: false,
// Write all styles to the bundle destination where .js is replaced by .css
output: true,
// Filename to write all styles
output: 'bundle.css',
// Callback that will be called ongenerate with two arguments:
// - styles: the concatenated styles in order of imported
// - styleNodes: an array of style objects:
// [
// { id: './style1.scss', content: 'body { color: red };' },
// { id: './style2.scss', content: 'body { color: green };' }
// ]
output(styles, styleNodes) {
writeFileSync('bundle.css', styles);
}
})
```
### `insert`
+ Type: `Boolean` _(default: false)_
If you specify `true`, the plugin will insert compiled CSS into `<head/>` tag.
```js
sass({
insert: true
})
```
### `processor`
+ Type: `Function`
If you specify a function as processor which will be called with compiled css before generate phase.
```js
import autoprefixer from 'autoprefixer';
import postcss from 'postcss';
sass({
// Processor will be called with two arguments:
// - style: the compiled css
// - id: import id
processor: css => postcss([autoprefixer])
.process(css)
.then(result => result.css)
})
```
The `processor` also support object result. Reverse `css` filed for stylesheet, the rest properties can be customized.
```js
sass({
processor(code) {
return {
css: '.body {}',
foo: 'foo',
bar: 'bar',
};
},
})
```
Otherwise, you could do:
```js
import style, { foo, bar } from 'stylesheet';
```
### `runtime`
+ Type: `Object` _(default: sass)_
If you specify an object, it will be used instead of [sass](https://github.com/sass/dart-sass). You can use this to pass a different sass compiler (for example the `node-sass` npm package).
### `options`
+ Type: `Object`
Options for [sass](https://github.com/sass/dart-sass) or your own runtime sass compiler.
If you specify `data`, the plugin will treat as prepend sass string.
Since you can inject variables during sass compilation with node.
```js
sass({
options: {
data: '$color: #000;'
}
})
```
## License
[MIT](./LICENSE) [elycruz](https://github.com/elycruz),
[BinRui.Guan](mailto:differui@gmail.com)
|
