Skip to content
Rollup .scss imports into one bundled .scss file
JavaScript Vue CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows
dist
test
.eslintrc.json
.gitignore
.npmrc
LICENSE
README.md
index.js
package.json

README.md

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.

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 rollup-plugin-vue:

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(),
  ],
};
You can’t perform that action at this time.