rollup-plugin-sass-modules

1.4.0 verified Mon Apr 27 auth: no javascript

A Rollup plugin that imports and compiles SASS/SCSS files as modules, supporting sourcemaps and extraction of CSS files. Version 1.4.0 is the latest stable release. It integrates with dart-sass and allows import from `node_modules`. Key differentiator: exports the dependency tree to Rollup and supports post-processing via a `processor` function. Ideal for projects using Rollup as a bundler who want to use Sass with CSS modules or extracted CSS.

Common errors

error Error: Cannot find module 'rollup-plugin-sass-modules' ↓

cause Package not installed or missing from package.json devDependencies.

fix

Run npm install rollup-plugin-sass-modules --save-dev.

error TypeError: sassModules is not a function ↓

cause CommonJS require() without accessing .default; or using named import when default is expected.

fix

Use const sassModules = require('rollup-plugin-sass-modules').default for CommonJS, or use ESM import.

error Error: The 'sass' package is required. Please install it: npm install sass --save-dev ↓

cause dart-sass peer dependency not installed.

fix

Install the sass package as devDependency.

error Error: You must specify an 'outFile' option to extract CSS. ↓

cause CSS extraction attempted without providing outFile in options.

fix

Add options: { outFile: 'dist/styles.css' } to plugin config.

Warnings

breaking Version 1.x requires peer dependency of Rollup >=1.0.0; older Rollup versions (0.x) break. ↓

fix Upgrade to Rollup >= 1.0.0.

deprecated The `processor` option accepts a function returning a Promise; using synchronous processor is deprecated. ↓

fix Ensure processor returns a Promise resolving to { code, map }.

gotcha By default, the plugin does not extract CSS unless `options.outFile` is provided. Without it, CSS is emitted as a module. ↓

fix Set `options.outFile` to extract CSS to a file, or use `emitCss: true` option (if supported).

gotcha Importing .sass or .scss files requires the file extension in the import statement. ↓

fix Use full path with extension, e.g., `import './styles.scss'`.

gotcha The plugin uses dart-sass (the `sass` package) internally; ensure it is installed as a dev dependency. ↓

fix Run `npm install sass --save-dev`.

Install

npm install rollup-plugin-sass-modules

yarn add rollup-plugin-sass-modules

pnpm add rollup-plugin-sass-modules

Imports

sassModules

wrong

const sassModules = require('rollup-plugin-sass-modules')

correct

import sassModules from 'rollup-plugin-sass-modules'

Package supports ESM; default import.

sassModules

wrong

import sassModules from 'rollup-plugin-sass-modules'

correct

import { sassModules } from 'rollup-plugin-sass-modules'

Use named export if preferred, but default export is the primary way.

sassModules

wrong

const sassModules = require('rollup-plugin-sass-modules')

correct

const sassModules = require('rollup-plugin-sass-modules').default

CommonJS users must access `.default` due to ESM-first design.

Quickstart

Configures Rollup to compile Sass files as modules, enabling imports from JavaScript and generating sourcemaps.

import sassModules from 'rollup-plugin-sass-modules';
import { babel } from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
  },
  plugins: [
    resolve(),
    sassModules({
      include: ['**/*.scss', '**/*.sass'],
      exclude: ['node_modules'],
      options: {
        outputStyle: 'compressed',
        sourceMap: true,
      },
    }),
    babel({ babelHelpers: 'bundled' }),
  ],
};