Namespace, Primitive, Method

    rollup-plugin-scss

    3.0.0 • Public • Published

    Rollup multiple .scss, .sass and .css imports

    Software License Issues JavaScript Style Guide NPM Latest Version

    Installation

    # v3 needs sass installed seperately (or node-sass)
    npm install --save-dev rollup-plugin-scss@3 sass
    
    # v2 has node-sass included (with option to use sass)
    npm install --save-dev rollup-plugin-scss@2
    

    If any of them is installed, it will be used automatically, if both installed sass will be used.

    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,
    
      // Enables/disables generation of source map (default: false)
      sourceMap: true,
    
      // 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";`,
    
      // A Sass (sass compatible) compiler to use
      // - sass and node-sass packages are picked up automatically
      // - you can use this option to specify custom package (e.g. a fork of one of them)
      sass: require('node-sass'),
    
      // Run postcss processor before output
      processor: () => postcss([autoprefixer({ overrideBrowserslist: 'Edge 18' })]),
    
      // Process resulting CSS
      processor: (css, map) => ({
        css: css.replace('/*date*/', '/* ' + new Date().toJSON() + ' */'),
        map
      }),
    
      // or, just string (for backward compatiblity with v2 or simplicity)
      processor: css =>
        css.replace('/*date*/', '/* ' + new Date().toJSON() + ' */'),
    
      // Log filename and size of generated CSS files (default: true)
      verbose: true
    
      // 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']
    
      // Any other options are passed to the sass compiler
      includePaths: ...
    })

    Examples

    Using postcss + autoprefixer + includePaths (sass option)

    import scss from 'rollup-plugin-scss'
    import postcss from 'postcss'
    import autoprefixer from 'autoprefixer'
    
    export default {
      input: 'input.js',
      output: {
        file: 'output.js',
        format: 'esm'
      },
      plugins: [
        scss({
          processor: () => postcss([autoprefixer()]),
          includePaths: [
            path.join(__dirname, '../../node_modules/'),
            'node_modules/'
          ]
        })
      ]
    }

    Minify CSS output:

    scss({
      outputStyle: 'compressed'
    })

    Changelog

    Please see CHANGELOG for more information what has changed recently.

    Contributing

    Contributions and feedback are very welcome. New features should include a test.

    To get it running:

    1. Clone the project.
    2. npm install

    Credits

    License

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

    Install

    npm i rollup-plugin-scss

    DownloadsWeekly Downloads

    63,881

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    36.6 kB

    Total Files

    7

    Last publish

    Collaborators

    • thgh