Registry / web-framework / esbuild-scss-modules-plugin

esbuild-scss-modules-plugin

library1.1.1jsnpmunverified

A plugin for esbuild that enables SCSS and CSS Modules support, allowing you to import .scss or .module.scss files and obtain CSS module class name mappings. Currently at version 1.1.1, it is actively maintained with a low release cadence. It offers features like CSS injection and minification (via cssnano) and supports esbuild's watch mode. Compared to alternatives like esbuild-css-modules-plugin, this one directly integrates SCSS compilation without needing additional loaders or plugins. Ships TypeScript types.

web-framework

npm install esbuild-scss-modules-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · ESBUILD-SCSS-MODUL

esbuild-scss-modules-plugin

web-frameworkjavascriptv1.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ScssModulesPlugin

✓ import { ScssModulesPlugin } from 'esbuild-scss-modules-plugin'

✗ import ScssModulesPlugin from 'esbuild-scss-modules-plugin'

The package exposes a named export, not a default export.

ScssModulesPlugin (as default)

✓ import { ScssModulesPlugin } from 'esbuild-scss-modules-plugin'

✗ import ScssModulesPlugin from 'esbuild-scss-modules-plugin'

There is no default export; only named.

ScssModulesPlugin (CJS require)

✓ const { ScssModulesPlugin } = require('esbuild-scss-modules-plugin')

✗ const ScssModulesPlugin = require('esbuild-scss-modules-plugin')

CJS require should destructure the named export.

CSS modules types

✓ import type { CSSModules } from 'esbuild-scss-modules-plugin'

TypeScript users may need to import the CSSModules type for module declarations.

Minimal setup showing how to use the plugin with esbuild, enabling CSS module support for .scss files and injecting styles into the bundle.

import esbuild from 'esbuild'; import { ScssModulesPlugin } from 'esbuild-scss-modules-plugin'; await esbuild.build({ entryPoints: ['src/index.ts'], bundle: true, outfile: 'dist/index.js', plugins: [ ScssModulesPlugin({ inject: true, minify: false, localsConvention: 'camelCaseOnly', }), ], });

Debug

Known issues

gotchaThe plugin only processes .scss and .module.scss files; plain .css files are not handled.

fix

Use a separate esbuild CSS plugin for .css files or rename them to .scss.

affects: >=1.0.0

gotchaWhen inject: false, CSS is output separately; you must handle the CSS output manually.

fix

Set inject: true to automatically inject CSS into JS bundle, or use the cssCallback to handle CSS.

affects: >=1.0.0

gotchaThe minify option requires cssnano to be installed as a peer dependency.

fix

Install cssnano: npm install cssnano@~5.0.6

affects: >=1.0.0

deprecatedOptions typed in index.ts but not explicitly documented; checking source is needed for full list.

fix

Refer to the source file index.ts for all available options.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'cssnano'

The minify option is enabled but cssnano is not installed.

fix

Install cssnano as a dev dependency: npm install --save-dev cssnano@~5.0.6

TypeError: ScssModulesPlugin is not a function

Default import used instead of named import.

fix

Use named import: import { ScssModulesPlugin } from 'esbuild-scss-modules-plugin'

Module parse failed: Unexpected token (1:0) - You may need an appropriate loader to handle this file type.

The plugin is not included in the esbuild plugins array, or the entry point is not using the plugin.

fix

Add the plugin to the plugins array and ensure entry points import .scss files.

Upgrade

Version history

1.1.1latest on npm

Audit

Dependencies

cssnanooptionalUsed for minifying CSS output when the minify option is enabled.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/ictrobot/esbuild-scss-modules-plugin ↗

packagehttps://www.npmjs.com/package/esbuild-scss-modules-plugin ↗