Registry / web-framework / esbuild-style-loader

esbuild-style-loader

library0.3.4jsnpmunverified

A style loader plugin for esbuild that supports CSS, SCSS, LESS, Stylus, and CSS Modules. Current stable version is 0.3.4. It uses lightningcss for fast CSS processing and includes autoprefixer with sensible defaults (ios >= 11, android >= 5, chrome >= 54). Unlike other esbuild CSS plugins, it offers zero-config setup, built-in CSS Modules support for files matching .module.css or ?modules query, and handles multiple preprocessors via built-in loaders (LESS built-in, sass via peer dep). Released under MIT license with TypeScript types included.

web-framework devops

npm install esbuild-style-loader

github ↗package ↗

INSTALL

IMPORT

SIG · ESBUILD-STYLE-LOAD

esbuild-style-loader

web-frameworkjavascriptv0.3.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.

styleLoader

✓ import { styleLoader } from 'esbuild-style-loader'

✗ const styleLoader = require('esbuild-style-loader')

ESM-only since v0.3.3; named export, not default.

styleLoader

✓ const { styleLoader } = require('esbuild-style-loader')

✗ const styleLoader = require('esbuild-style-loader').default

CommonJS destructured import works; no default export.

StyleLoaderOptions

✓ import type { StyleLoaderOptions } from 'esbuild-style-loader'

Type-only import for TypeScript users.

Sets up esbuild with the style loader plugin, bundling CSS imports from app.js and outputting to dist/

import { build } from 'esbuild'; import { styleLoader } from 'esbuild-style-loader'; build({ entryPoints: ['src/app.js'], bundle: true, outdir: 'dist', plugins: [ styleLoader({ filter: /\.(css|less|scss|sass)(\?.*)?$/, }), ], }).catch(() => process.exit(1));

Debug

Known issues

breakingv0.3.3 removed CJS support for ESM-only builds; update imports accordingly.

fix

Switch to ESM imports: import { styleLoader } from 'esbuild-style-loader'

affects: >=0.3.3

deprecatedPassing 'true' for cssModules option is deprecated; use an object with 'pattern'

fix

Use cssModules: { pattern: '[local]__[hash]' } instead of cssModules: true

affects: <0.3.4

gotchaCSS Modules only work for files matching .module.css or ?modules query; normal imports are treated as global CSS

fix

Rename file to .module.css or append ?modules query

affects: all

gotchaSass requires the 'sass' peer dependency; node-sass and sass-embedded are not supported

fix

Install sass: npm install sass

affects: all

deprecatedThe 'namespace' option default changed from 'file' to ['native-component', 'file']

fix

Explicitly set namespace if relying on old behavior

affects: >=0.3.4

Errors

Common errors & fixes

Error: Cannot find module 'esbuild-style-loader'

Package not installed

fix

npm install esbuild-style-loader

Error: Must use import to load ES Module: esbuild-style-loader

Using require() with ESM-only version (v0.3.3+)

fix

Use import { styleLoader } from 'esbuild-style-loader'

TypeError: styleLoader is not a function

Importing wrong symbol or default export

fix

Use named import: import { styleLoader } from 'esbuild-style-loader'

CSS Modules file './style.css' imported with styleLoader but not treated as module

File name does not match .module.css or query

fix

Rename to style.module.css or import with ?modules

Upgrade

Version history

0.3.4latest on npm

Audit

Dependencies

esbuildrequiredpeer dependency required for plugin to work

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/noyobo/esbuild-style-loader ↗

packagehttps://www.npmjs.com/package/esbuild-style-loader ↗