Skip to content

Rollup .scss imports into one bundled .scss file

License

Notifications You must be signed in to change notification settings

weizhenye/rollup-plugin-bundle-scss

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

rollup-plugin-bundle-scss

GitHub Action Node version NPM version License

Rollup .scss imports into one bundled .scss file. Supports .vue files.

Maybe you're writing an UI library with SCSS for styles, and you want to bundle all styles in components into one .scss file, so that users can import it and do some custom theming. That's it.

It dependence on scss-bundle.

Installation

npm install -D rollup-plugin-bundle-scss

Usage

import bundleScss from 'rollup-plugin-bundle-scss';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'esm',
  },
  plugins: [
    // output to dist/index.scss
    bundleScss(),
    // output to dist/foo.scss
    // bundleScss({ output: 'foo.scss' }),
  ],
};

Using with Vue 2 by rollup-plugin-vue@5:

import bundleScss from 'rollup-plugin-bundle-scss';
import commonjs from 'rollup-plugin-commonjs';
import vue from 'rollup-plugin-vue';

export default {
  input: 'src/App.vue',
  output: {
    file: 'dist/index.js',
    format: 'esm',
  },
  plugins: [
    // required by rollup-plugin-vue
    commonjs(),
    // put it before vue()
    bundleScss(),
    vue(),
  ],
};

Using with Vue 3 by rollup-plugin-vue@6:

import bundleScss from 'rollup-plugin-bundle-scss';
import vue from 'rollup-plugin-vue';

export default {
  input: 'src/App.vue',
  output: {
    file: 'dist/index.js',
    format: 'esm',
  },
  plugins: [
    vue(),
    // put it after vue()
    bundleScss(),
  ],
};

Using with rollup-plugin-postcss:

import bundleScss from 'rollup-plugin-bundle-scss';
import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'esm',
  },
  plugins: [
    // put it before postcss(), and set exclusive to false
    bundleScss({ exclusive: false }),
    postcss({
      // ...
    }),
  ],
};

API

bundleScss({
  // where to output bundled SCSS file
  output: String,

  // Whether SCSS file is exclusive to rollup-plugin-bundle-scss.
  // Defalut value: true
  // Set it to false when there're other plugin to handle SCSS file after bundleScss()
  exclusive: Boolean,

  // bundlerOptions will be passed into `scss-bundle` package,
  // see document here https://github.com/reactway/scss-bundle
  bundlerOptions: {
    // If tilde import is used, `project` is required for finding `node_modules`
    project: String,
    dedupeGlobs: String[],
    includePaths: String[],
    ignoreImports: String[],
  },
})