Packages
volt
0.19.0
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.1
0.18.0
0.17.11
0.17.10
0.17.9
0.17.8
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.0
0.15.5
0.15.4
0.15.3
0.15.2
0.15.1
0.15.0
0.14.12
0.14.11
0.14.10
0.14.9
0.14.8
0.14.7
0.14.6
0.14.5
0.14.4
0.14.3
0.14.2
0.14.1
0.14.0
0.13.1
0.13.0
0.12.0
0.11.3
0.11.2
0.11.1
0.11.0
0.10.9
0.10.8
0.10.7
0.10.6
0.10.5
0.10.4
0.10.3
0.10.2
0.10.1
0.10.0
0.9.2
0.9.1
0.9.0
0.8.4
0.8.3
0.8.2
0.8.1
0.8.0
0.7.1
0.7.0
0.6.5
0.6.4
0.6.3
0.6.2
0.6.1
0.6.0
0.5.0
0.4.3
0.4.2
0.4.1
0.4.0
0.3.0
0.2.0
0.1.0
Elixir-native frontend build tool — dev server, HMR, and production builds powered by OXC and Vize.
Current section
Files
Jump to
Current section
Files
guides/features/css-modules.md
# CSS Modules
Files ending in `.module.css`, `.module.scss`, or `.module.sass` get scoped class names via LightningCSS. Sass and SCSS modules are preprocessed with the native Rust Sass compiler first.
## Usage
```css
/* button.module.css */
.primary { color: blue }
.large { font-size: 2em }
```
```javascript
import styles from './button.module.css'
console.log(styles.primary) // "ewq3O_primary"
console.log(styles.large) // "ewq3O_large"
```
The generated class names are unique per file, preventing style collisions across components.
## How It Works
Volt compiles CSS Module files into two outputs:
1. **JavaScript module** — exports a mapping of original class names to scoped names
2. **Scoped CSS** — the original CSS with class names rewritten to their scoped equivalents
Both are handled automatically during development and production builds. The scoped CSS is included in the output bundle alongside any Tailwind or regular CSS.
## Framework Examples
### React
```javascript
import styles from './Card.module.css'
export default function Card({ children }) {
return <div className={styles.card}>{children}</div>
}
```
### Vue
```vue
<script setup>
import styles from './Card.module.css'
</script>
<template>
<div :class="styles.card"><slot /></div>
</template>
```
### Svelte
```svelte
<script>
import styles from './Card.module.css'
let { children } = $props()
</script>
<div class={styles.card}>{@render children()}</div>
```