SASS / SCSS
SASS preprocessing plugin.
The @bdocs/plugin-sass plugin adds official support for .scss and .sass files in Boltdocs by configuring the preprocessor in Vite.
Installation
Install @bdocs/plugin-sass and sass-embedded:
bash
pnpm add -D @bdocs/plugin-sass sass-embedded
Plugin Options
| Option | Type | Description |
|---|---|---|
additionalData | string | SASS/SCSS added to the start of every CSS code block (ideal for global variables/mixins). |
api | 'modern' | 'legacy' | SASS API mode (default: 'modern'). |
includePaths | string[] | Additional directories for @use and @import resolution in legacy mode. |
loadPaths | string[] | Additional directories for @use and @import resolution in modern mode. |
| Other Sass options | Sass options | Compiler options such as quietDeps and silenceDeprecations are forwarded to both SCSS and indented Sass. |
SCSS Component Example
styles/card.module.scss
.card {
background: var(--bdocs-bg-secondary);
border: 1px solid var(--bdocs-border);
border-radius: 0.5rem;
padding: 1.5rem;
&:hover {
border-color: var(--bdocs-primary);
}
}
tsx
import styles from './card.module.scss'
export function Card({ children }: { children: React.ReactNode }) {
return <div className={styles.card}>{children}</div>
}
Last updated on October 18, 2026
