# Rollup v0.60+ and v1+
npm install --save-dev rollup-plugin-scss
# Rollup v0.59 and below
npm install --save-dev rollup-plugin-scss@0
// rollup.config.js
import scss from 'rollup-plugin-scss'
export default {
input: 'input.js',
output: {
file: 'output.js',
format: 'esm'
},
plugins: [
scss() // will output compiled styles to output.css
]
}// entry.js
import './reset.scss'Options are passed to the sass compiler (node-sass by defaut). By default the plugin will base the filename for the css on the bundle destination.
scss({
// Choose *one* of these possible "output:..." options
// Default behaviour is to write all styles to the bundle destination where .js is replaced by .css
output: true,
// Filename to write all styles to
output: 'bundle.css',
// Callback that will be called ongenerate with two arguments:
// - styles: the contents of all style tags combined: 'body { color: green }'
// - styleNodes: an array of style objects: { filename: 'body { ... }' }
output: function (styles, styleNodes) {
writeFileSync('bundle.css', styles)
},
// Disable any style output or callbacks, import as string
output: false,
// Determine if node process should be terminated on error (default: false)
failOnError: true,
// Prefix global scss. Useful for variables and mixins.
prefix: `@import "./fonts.scss";`,
// Use a node-sass compatible compiler (default: node-sass)
sass: require('sass'),
// Add file/folder to be monitored in watch mode so that changes to these files will trigger rebuilds.
// Do not choose a directory where rollup output or dest is pointed to as this will cause an infinite loop
watch: 'src/styles/components',
watch: ['src/styles/components', 'src/multiple/folders'],
})Please see CHANGELOG for more information what has changed recently.
Contributions and feedback are very welcome.
To get it running:
- Clone the project.
npm install
The MIT License (MIT). Please see License File for more information.