riri / rollup-plugin-scss

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

License:MIT License


Languages

Language:JavaScript 97.3%Language:CSS 2.7%