npm install rollup-plugin-sass -D
import { rollup } from 'rollup';
import sass from 'rollup-plugin-sass';
rollup({
entry: 'main.js',
plugins: [
sass()
]
}).then(...)
- Type:
Boolean|String|Function
(default: false)
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 concatentated 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);
}
});
- Type:
Boolean
(default: false)
If you specify true
, the plugin will insert compiled CSS into <head/>
tag.
- Type:
Function
(default: null)
If you specify a function as processor which will be called with compiled css before generate phase.
import sass from 'rollup-plugin-sass'
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)
});
- Type:
Object
(default: null)
Options for node-sass.
If you specfiy data
, the plugin will treat as prepend sass string.
Since you can inject variables during sass compilation with node.
sass({
options: {
data: '$color: #000;'
}
})
MIT © BinRui.Guan