Registry / web-framework / esbuild-sass-plugin

esbuild-sass-plugin

library3.7.0jsnpmunverified

An esbuild plugin for compiling Sass and SCSS files, supporting PostCSS, CSS modules, constructable stylesheets for custom elements, dynamic styles, and CSS result import for lit-element. Version 3.7.0 requires esbuild >=0.27.3 and sass-embedded ^1.97.3 as peer dependencies. Released actively, it offers caching, URL rewriting, pre-compiling for global resources, and support for Sass Embedded Async API. Key differentiators include lit-css output for web components, CSS module support, and the ability to use both sass and sass-embedded backends.

web-framework serialization

npm install esbuild-sass-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · ESBUILD-SASS-PLUGI

esbuild-sass-plugin

web-frameworkjavascriptv3.7.0

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.

sassPlugin

✓ import { sassPlugin } from 'esbuild-sass-plugin'

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

Named export; CommonJS require returns the module object, not the function directly.

sassPlugin

✓ const { sassPlugin } = require('esbuild-sass-plugin')

✗ const sassPlugin = require('esbuild-sass-plugin').default

CommonJS destructuring is correct; there is no default export.

Type imports

✓ import type { SassPluginOptions } from 'esbuild-sass-plugin'

✗ import { SassPluginOptions } from 'esbuild-sass-plugin'

SassPluginOptions is a TypeScript type, so use import type to avoid runtime inclusion.

Shows basic esbuild build setup with the sass plugin, including loadPaths and caching.

import { sassPlugin } from 'esbuild-sass-plugin'; import * as esbuild from 'esbuild'; await esbuild.build({ entryPoints: ['src/index.ts'], bundle: true, outfile: 'dist/bundle.js', plugins: [ sassPlugin({ type: 'css', cache: true, loadPaths: ['src/styles'], // Optional: use sass-embedded embedded: true }) ] }); console.log('Build complete.');

Debug

Known issues

breakingPlugin now requires esbuild >=0.27.3 and sass-embedded ^1.97.3 as peer dependencies. Older versions may fail to install or run.

fix

Update esbuild and sass-embedded to compatible versions.

affects: >=3.0.0

deprecatedThe `sass` package is no longer supported as a peer dependency. Use `sass-embedded` instead.

fix

Replace `sass` with `sass-embedded` in your project dependencies.

affects: >=3.0.0

gotchaTypeScript users may incorrectly import SassPluginOptions as a runtime value. It is a type only and should be imported with `import type`.

fix

Use `import type { SassPluginOptions } from 'esbuild-sass-plugin'`.

affects: >=2.0.0

gotchaCommonJS require() returns the module object; direct usage like `require('esbuild-sass-plugin')()` fails because sassPlugin is a named export.

fix

Use `const { sassPlugin } = require('esbuild-sass-plugin')`.

affects: >=1.0.0

gotchaThe `type` option defaults to 'css', which emits external CSS files. For lit-element or constructable stylesheets, set `type: 'lit-css'`.

fix

Set `type: 'lit-css'` in the plugin options.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'sass-embedded'

sass-embedded is a peer dependency and not installed.

fix

Run `npm install sass-embedded@^1.97.3` or `yarn add sass-embedded@^1.97.3`.

TypeError: sassPlugin is not a function

CommonJS require returns the module object, not the function directly.

fix

Use `const { sassPlugin } = require('esbuild-sass-plugin')` instead of `const sassPlugin = require('esbuild-sass-plugin')`.

error: No matching entry point for 'src/styles/index.scss' (plugin: sass)

The sass file is not included in esbuild's entryPoints; you need to import the SCSS from a JS/TS file.

fix

Add `import './styles/index.scss'` in your JavaScript or TypeScript entry point.

Upgrade

Version history

3.7.0latest on npm

Audit

Dependencies

esbuildrequiredpeer dependency: plugin integrates with esbuild's build system

sass-embeddedoptionalpeer dependency: required for Sass compilation; alternative to sass package

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/glromeo/esbuild-sass-plugin ↗

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