> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/vercel/next.js/llms.txt
> Use this file to discover all available pages before exploring further.
# Sass
> Style your Next.js application using Sass with .scss and .sass file extensions.
Next.js has built-in support for Sass after the package is installed. You can use both `.scss` and `.sass` syntax.
## Installation
```bash theme={null}
npm install --save-dev sass
```
```bash theme={null}
pnpm add -D sass
```
```bash theme={null}
yarn add -D sass
```
```bash theme={null}
bun add -D sass
```
## Usage with CSS Modules
Use Sass with CSS Modules by creating a file with the `.module.scss` or `.module.sass` extension:
```scss app/blog/blog.module.scss theme={null}
$padding: 24px;
.blog {
padding: $padding;
h1 {
font-size: 2rem;
}
}
```
```tsx app/blog/page.tsx theme={null}
import styles from './blog.module.scss'
export default function Page() {
return
}
```
```jsx app/blog/page.js theme={null}
import styles from './blog.module.scss'
export default function Page() {
return
}
```
## Global Sass
Import global `.scss` or `.sass` files in your root layout just like global CSS:
```scss app/globals.scss theme={null}
$font-size-base: 16px;
body {
font-size: $font-size-base;
margin: 0;
}
```
```tsx app/layout.tsx theme={null}
import './globals.scss'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
```jsx app/layout.js theme={null}
import './globals.scss'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
## Configuring Sass options
To configure the Sass compiler, use `sassOptions` in `next.config.js`. You can pass any option supported by the `sass` package:
```ts next.config.ts theme={null}
import type { NextConfig } from 'next'
const config: NextConfig = {
sassOptions: {
// Additional load paths for @use and @import
loadPaths: ['./styles'],
// Silence deprecation warnings
silenceDeprecations: ['legacy-js-api'],
},
}
export default config
```
```js next.config.js theme={null}
/** @type {import('next').NextConfig} */
const nextConfig = {
sassOptions: {
loadPaths: ['./styles'],
silenceDeprecations: ['legacy-js-api'],
},
}
module.exports = nextConfig
```
### Using a custom Sass implementation
You can specify an alternative implementation such as `sass-embedded`:
```js next.config.js theme={null}
/** @type {import('next').NextConfig} */
const nextConfig = {
sassOptions: {
implementation: 'sass-embedded',
},
}
module.exports = nextConfig
```
## Shared variables with CSS Modules
To share Sass variables across all CSS Module files without importing them manually, use the `additionalData` option:
```js next.config.js theme={null}
/** @type {import('next').NextConfig} */
const nextConfig = {
sassOptions: {
additionalData: `@use "@/styles/variables" as *;`,
},
}
module.exports = nextConfig
```
Then define your shared variables:
```scss styles/variables.scss theme={null}
$primary-color: #3b82f6;
$font-size-base: 16px;
```
Now every CSS Module can use `$primary-color` and `$font-size-base` without an explicit `@use` import.
The `.scss` (SCSS syntax) and `.sass` (indented syntax) file extensions are both supported. Choose one based on your team's preference—SCSS is more common.