Setting up CSS Modules

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.

Tools

Bun

Bun supports CSS Modules. Learn more.

Lightning CSS

Lightning CSS supports almost all features of CSS Modules. Learn more.

Parcel

Parcel supports CSS Modules. Learn more.

PostCSS

PostCSS supports CSS Modules through the plugin postcss-modules. Learn more.

Rspack

Rspack supports CSS Modules. Learn more.

Webpack

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

Vite supports CSS Modules through Lightning CSS. Learn more.

Frameworks

Angular

Angular supports CSS Modules through postcss-modules and posthtml-css-modules. Learn more.

Astro

Astro supports CSS Modules. Learn more.

Create React App

Create React App supports CSS Modules. Learn more.

Ember

Ember supports CSS Modules through ember-css-modules. Learn more.

Next.js

Next.js supports CSS Modules for both webpack and Turbopack (next dev --turbo). Learn more.

Nuxt

Nuxt supports CSS Modules. Learn more.

Remix

Remix supports CSS Modules. Learn more.

Solid

Solid supports CSS Modules. Learn more.

Svelte

Svelte supports CSS Modules through the preprocessor svelte-preprocess-cssmodules. Learn more.