esbuild-plugin-sass

0.0.3 verified Fri May 01 auth: no javascript

An esbuild plugin that enables importing SASS/SCSS files directly in JavaScript bundles, with optional CSS modules support (class name hashing). Current stable version is 0.0.3, with low release cadence. Key differentiator: simple setup for SASS compilation within esbuild without external build tools, and optional CSS modules via separate plugin variant. No TypeScript types included.

Common errors

error Error: Cannot find module 'sass' ↓

cause Missing peer dependency 'sass'.

fix

Install sass: npm install sass

error TypeError: sassPlugin is not a function ↓

cause Incorrect import; used default import when CommonJS require was intended, or vice versa.

fix

Use const sassPlugin = require('esbuild-plugin-sass'); for CommonJS, or check import statement.

Warnings

gotcha Plugin does not support CSS modules by default; use esbuild-plugin-sass-modules for hashed class names. ↓

fix Switch to esbuild-plugin-sass-modules if CSS modules are needed.

gotcha Requires sass (dart-sass) to be installed; not bundled with the plugin. ↓

fix Run 'npm install sass' alongside esbuild-plugin-sass.

gotcha Output CSS file name is derived from entry point name; cannot be customized via options. ↓

fix Rename entry point or use external tools to rename the output.

Install

npm install esbuild-plugin-sass-modules

yarn add esbuild-plugin-sass-modules

pnpm add esbuild-plugin-sass-modules

Imports

default

wrong

const sassPlugin = require('esbuild-plugin-sass')

correct

import sassPlugin from 'esbuild-plugin-sass'

CommonJS require works but ESM import is preferred for newer esbuild setups

Quickstart

Shows how to use esbuild-plugin-sass to compile SASS files during esbuild bundling.

const esbuild = require('esbuild');
const sassPlugin = require('esbuild-plugin-sass');
esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [sassPlugin()],
}).catch((e) => console.error(e.message));