Registry / web-framework / esbuild-inline-sass

esbuild-inline-sass

JSON →
library0.4.4jsnpmunverified

An esbuild plugin that inlines SASS/SCSS files as injected <style> tags in the browser, eliminating the need for separate CSS files. Version 0.4.4 is the latest stable release, actively maintained with occasional dependency updates. It supports both ESM and CommonJS, ships TypeScript types, and differentiates from other esbuild CSS plugins by automatically creating a style element and appending compiled CSS to the DOM, supporting remote @imports via CDN. The only peer dependency is esbuild itself.

web-framework
npm install esbuild-inline-sass
github ↗package ↗
INSTALL
IMPORT
SIG · ESBUILD-INLINE-SAS
E
esbuild-inline-sass
web-frameworkjavascriptv0.4.4
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

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

inlineSass
✓ import { inlineSass } from 'esbuild-inline-sass'
✗ const inlineSass = require('esbuild-inline-sass')
Default export does not exist; named import 'inlineSass' must be used. CommonJS users must destructure: const { inlineSass } = require('esbuild-inline-sass').
inlineScss
✓ import { inlineScss } from 'esbuild-inline-sass'
✗ const inlineScss = require('esbuild-inline-sass').inlineScss
Alias for inlineSass; either can be used interchangeably. Both are valid named exports.
InlineSassOptions
✓ import type { InlineSassOptions } from 'esbuild-inline-sass'
✗ import { InlineSassOptions } from 'esbuild-inline-sass'
TypeScript only; export is a type, must be imported with 'type' keyword or as type-only import.

Shows how to use the plugin in an esbuild build pipeline to inline SCSS files.

import { inlineSass } from 'esbuild-inline-sass'; import * as esbuild from 'esbuild'; await esbuild.build({ entryPoints: ['src/index.js'], bundle: true, outfile: 'dist/bundle.js', plugins: [inlineSass({ minify: true })], });
Debug
Known issues
gotchaPlugin expects .scss or .sass extension; .css files are not processed.
fix
Rename .css files to .scss or .sass, or preprocess them separately.
affects: >=0.0.0
gotchaInline styles use document.createElement('style') which does not work in server-side environments (Node.js, SSR).
fix
Use only in client-side code; avoid importing styles in Node.js builds or provide a conditional check.
affects: >=0.0.0
deprecatedOptions object currently has no deprecated fields; no known deprecations at this version.
fix
N/A
affects: <0.4.4
gotchaRemote @import statements are not resolved by esbuild; plugin passes them through into the inline style tag.
fix
Ensure remote URLs are accessible at runtime, or bundle dependencies locally.
affects: >=0.0.0
Errors
Common errors & fixes
Error: The plugin 'esbuild-inline-sass' is not valid. Expected an object with a name property.
Passing the plugin function directly instead of calling it (e.g., plugins: [inlineSass] instead of plugins: [inlineSass()]).
fix
Call the function: plugins: [inlineSass({minify: true})]
TypeError: _inlineSass.inlineSass is not a function
Using require('esbuild-inline-sass') without destructuring the named export in CommonJS.
fix
Use const { inlineSass } = require('esbuild-inline-sass');
Error: Cannot find module 'esbuild-inline-sass'
Missing or incorrect installation; esbuild-inline-sass not in node_modules.
fix
Run 'npm install --save-dev esbuild-inline-sass' or check package.json.
Upgrade
Version history
0.4.4latest on npm
Audit
Dependencies
esbuildrequiredRequired peer dependency; the plugin runs during esbuild builds.
Agent activity
2 hits · last 30 days
node
2
Resources
githubhttps://github.com/ProdigyPXP/esbuild-inline-sass ↗
packagehttps://www.npmjs.com/package/esbuild-inline-sass ↗
esbuild-inline-sass — npm install esbuild-inline-sass · libregistry