rollup-plugin-sass

rollup-plugin-sass

Installation

npm install rollup-plugin-sass -D

Usage

import { rollup } from 'rollup';
import sass from 'rollup-plugin-sass';

rollup({
  entry: 'main.js',
  plugins: [
    sass()
  ]
}).then(...)

Options

output

• 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);
  }
});

insert

• Type: Boolean (default: false)

If you specify true, the plugin will insert compiled CSS into <head/> tag.

processor

• 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)
});

options

• 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;'
  }
})

License

MIT © BinRui.Guan