rollup-plugin-bundle-scss

0.1.3 verified Mon Apr 27 auth: no javascript

Rollup plugin that bundles imported .scss files and .vue component styles into a single .scss output file. Version 0.1.3 is the latest stable release, with irregular updates. It relies on scss-bundle for resolution and supports Vue 2 and Vue 3 via rollup-plugin-vue, as well as coexistence with rollup-plugin-postcss via the `exclusive` option. Compared to alternatives like rollup-plugin-scss or rollup-plugin-postcss, this plugin outputs raw SCSS (not compiled CSS) and is specifically designed for library authors who want to distribute themable SCSS sources.

Common errors

error Error: vue-template-compiler imported by rollup-plugin-bundle-scss will not throw error when Vue version is mismatch ↓

cause Vue template compiler version mismatch when using with rollup-plugin-vue.

fix

Ensure vue and vue-template-compiler versions match; update to v0.1.3 which handles this gracefully.

error Cannot find module 'scss-bundle' ↓

cause scss-bundle is not installed as a direct dependency.

fix

Run npm install scss-bundle --save-dev

Warnings

gotcha Plugin order matters with rollup-plugin-vue: for Vue 2 (rollup-plugin-vue@5) place bundleScss before vue(); for Vue 3 (rollup-plugin-vue@6) place after vue(). ↓

fix Ensure correct order as per Vue version.

gotcha When using with rollup-plugin-postcss, set exclusive: false to allow both plugins to handle SCSS files. ↓

fix Add exclusive: false to bundleScss options and place it before postcss.

deprecated The plugin uses scss-bundle which is no longer actively maintained. There is no indication of future updates. ↓

fix Consider migrating to a more actively maintained solution if needed.

Install

npm install rollup-plugin-bundle-scss

yarn add rollup-plugin-bundle-scss

pnpm add rollup-plugin-bundle-scss

Imports

default

wrong

const bundleScss = require('rollup-plugin-bundle-scss')

correct

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

Plugin exports a default function. CJS require works but ESM is preferred.

Quickstart

Basic Rollup config showing how to use the plugin to bundle SCSS into a single file.

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

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