Skip to content

Rollup and compile multiple .scss, .sass and .css imports

License

Notifications You must be signed in to change notification settings

riri/rollup-plugin-scss

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Rollup multiple .scss, .sass and .css imports

Integrates nicely with rollup-plugin-vue2

Software License Issues JavaScript Style Guide NPM Latest Version

Installation

The sass compiler is now a peer dependency of the plugin, so it must be installed explicitly.

# Rollup v0.60+ and v1+
npm install --save-dev rollup-plugin-scss node-sass

# Rollup v0.59 and below
npm install --save-dev rollup-plugin-scss@0 node-sass

Usage

// rollup.config.js
import scss from 'rollup-plugin-scss'

export default {
  entry: 'entry.js',
  dest: 'bundle.js',
  plugins: [
    scss() // will output compiled styles to bundle.css
  ]
}
// entry.js
import './reset.css'

Options

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)
  compiler: 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/scss/components',
})

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Contributions and feedback are very welcome.

To get it running:

  1. Clone the project.
  2. npm install

Credits

License

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

About

Rollup and compile multiple .scss, .sass and .css imports

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.3%
  • CSS 2.7%