CSS Modules works by compiling individual CSS files into both CSS and data. The CSS output is normal, global CSS, which can be injected directly into the browser or concatenated together and written to a file for production use. The data is used to map the human-readable names you've used in the files to the globally-safe output CSS.
Bun supports CSS Modules. Learn more.
Lightning CSS supports almost all features of CSS Modules. Learn more.
Parcel supports CSS Modules. Learn more.
PostCSS supports CSS Modules through the plugin postcss-modules. Learn more.
Rspack supports CSS Modules. Learn more.
The css-loader has CSS Modules built-in. Simply activate it by using the ?modules flag. We maintain an example project using this at css-modules/webpack-demo.
Vite supports CSS Modules through Lightning CSS. Learn more.
Angular supports CSS Modules through postcss-modules and posthtml-css-modules. Learn more.
Astro supports CSS Modules. Learn more.
Create React App supports CSS Modules. Learn more.
Ember supports CSS Modules through ember-css-modules. Learn more.
Next.js supports CSS Modules for both webpack and Turbopack (next dev --turbo). Learn more.
Nuxt supports CSS Modules. Learn more.
Remix supports CSS Modules. Learn more.
Solid supports CSS Modules. Learn more.
Svelte supports CSS Modules through the preprocessor svelte-preprocess-cssmodules. Learn more.