esbuild-inline-sass

0.4.4 verified Fri May 01 auth: no javascript

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.

Common errors

error Error: The plugin 'esbuild-inline-sass' is not valid. Expected an object with a name property. ↓

cause 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})]

error TypeError: _inlineSass.inlineSass is not a function ↓

cause Using require('esbuild-inline-sass') without destructuring the named export in CommonJS.

fix

Use const { inlineSass } = require('esbuild-inline-sass');

error Error: Cannot find module 'esbuild-inline-sass' ↓

cause Missing or incorrect installation; esbuild-inline-sass not in node_modules.

fix

Run 'npm install --save-dev esbuild-inline-sass' or check package.json.

Warnings

gotcha Plugin expects .scss or .sass extension; .css files are not processed. ↓

fix Rename .css files to .scss or .sass, or preprocess them separately.

gotcha Inline 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.

deprecated Options object currently has no deprecated fields; no known deprecations at this version. ↓

fix N/A

gotcha Remote @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.

Install

npm install esbuild-inline-sass

yarn add esbuild-inline-sass

pnpm add esbuild-inline-sass

Imports

inlineSass
wrong
```
const inlineSass = require('esbuild-inline-sass')
```
correct
```
import { inlineSass } from '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

wrong

const inlineScss = require('esbuild-inline-sass').inlineScss

correct

import { inlineScss } from 'esbuild-inline-sass'

Alias for inlineSass; either can be used interchangeably. Both are valid named exports.

InlineSassOptions
wrong
```
import { InlineSassOptions } from 'esbuild-inline-sass'
```
correct
```
import type { InlineSassOptions } from 'esbuild-inline-sass'
```
TypeScript only; export is a type, must be imported with 'type' keyword or as type-only import.

Quickstart

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 })],
});