rollup-plugin-scss

Rollup multiple .scss, .sass and .css imports

Installation

# 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

Usage

// 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

Options are passed to the sass compiler (node-sass by default). Refer to the Sass docs for more details on these options.
One notable option is indentedSyntax which you'll need if you're parsing Sass syntax instead of Scss syntax. (e.g. when extracting a Vue <style lang="sass"> tag)
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,
  
  // Choose files to include in processing (default: ['/**/*.css', '/**/*.scss', '/**/*.sass'])
  include: [],
  
  // Choose files to exclude from processing, (default: undefined) 
  exclude: [],

  // 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'),

  // Run postcss processor before output
  processor: css => postcss([autoprefixer({ overrideBrowserslist: "Edge 18" })]),

  // Process resulting CSS
  processor: css => css.replace('/*date*/', '/* ' + new Date().toJSON() + ' */'),

  // 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'],
})

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Contributions and feedback are very welcome.

To get it running:

• Clone the project.
• npm install

Credits

• Thomas Ghysels
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

Changelog

[2.6.1] - 2020-10-01

Updated

• Move node-sass to optionalDependencies @weizhenye