{"id":21291,"library":"esbuild-scss-modules-plugin","title":"esbuild SCSS Modules Plugin","description":"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.","status":"active","version":"1.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/ictrobot/esbuild-scss-modules-plugin","tags":["javascript","esbuild","plugin","scss","css modules","typescript"],"install":[{"cmd":"npm install esbuild-scss-modules-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-scss-modules-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-scss-modules-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for minifying CSS output when the minify option is enabled.","package":"cssnano","optional":true}],"imports":[{"note":"The package exposes a named export, not a default export.","wrong":"import ScssModulesPlugin from 'esbuild-scss-modules-plugin'","symbol":"ScssModulesPlugin","correct":"import { ScssModulesPlugin } from 'esbuild-scss-modules-plugin'"},{"note":"There is no default export; only named.","wrong":"import ScssModulesPlugin from 'esbuild-scss-modules-plugin'","symbol":"ScssModulesPlugin (as default)","correct":"import { ScssModulesPlugin } from 'esbuild-scss-modules-plugin'"},{"note":"CJS require should destructure the named export.","wrong":"const ScssModulesPlugin = require('esbuild-scss-modules-plugin')","symbol":"ScssModulesPlugin (CJS require)","correct":"const { ScssModulesPlugin } = require('esbuild-scss-modules-plugin')"},{"note":"TypeScript users may need to import the CSSModules type for module declarations.","symbol":"CSS modules types","correct":"import type { CSSModules } from 'esbuild-scss-modules-plugin'"}],"quickstart":{"code":"import esbuild from 'esbuild';\nimport { ScssModulesPlugin } from 'esbuild-scss-modules-plugin';\n\nawait esbuild.build({\n  entryPoints: ['src/index.ts'],\n  bundle: true,\n  outfile: 'dist/index.js',\n  plugins: [\n    ScssModulesPlugin({\n      inject: true,\n      minify: false,\n      localsConvention: 'camelCaseOnly',\n    }),\n  ],\n});","lang":"typescript","description":"Minimal setup showing how to use the plugin with esbuild, enabling CSS module support for .scss files and injecting styles into the bundle."},"warnings":[{"fix":"Use a separate esbuild CSS plugin for .css files or rename them to .scss.","message":"The plugin only processes .scss and .module.scss files; plain .css files are not handled.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set inject: true to automatically inject CSS into JS bundle, or use the cssCallback to handle CSS.","message":"When inject: false, CSS is output separately; you must handle the CSS output manually.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install cssnano: npm install cssnano@~5.0.6","message":"The minify option requires cssnano to be installed as a peer dependency.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Refer to the source file index.ts for all available options.","message":"Options typed in index.ts but not explicitly documented; checking source is needed for full list.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Install cssnano as a dev dependency: npm install --save-dev cssnano@~5.0.6","cause":"The minify option is enabled but cssnano is not installed.","error":"Error: Cannot find module 'cssnano'"},{"fix":"Use named import: import { ScssModulesPlugin } from 'esbuild-scss-modules-plugin'","cause":"Default import used instead of named import.","error":"TypeError: ScssModulesPlugin is not a function"},{"fix":"Add the plugin to the plugins array and ensure entry points import .scss files.","cause":"The plugin is not included in the esbuild plugins array, or the entry point is not using the plugin.","error":"Module parse failed: Unexpected token (1:0) - You may need an appropriate loader to handle this file type."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}