How to use Sass in Next.js | Next.js 日本語

Next.js has built-in support for integrating with Sass after the package is installed using both the .scss and .sass extensions. You can use component-level Sass via CSS Modules and the .module.scssor .module.sass extension.

First, install sass:

pnpm

npm

yarn

bun

pnpm add -D sass

npm install --save-dev sass

yarn add -D sass

bun add -D sass

pnpmnpmyarnbun

pnpm add -D sass

Good to know

Sass supports two different syntaxes, each with their own extension. The .scss extension requires you use the SCSS syntax, while the .sass extension requires you use the Indented Syntax ("Sass").

If you're not sure which to choose, start with the .scss extension which is a superset of CSS, and doesn't require you learn the Indented Syntax ("Sass").

Customizing Sass Options

If you want to configure your Sass options, use sassOptions in next.config.

TypeScript

JavaScript

next.config.ts

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}

export default nextConfig

next.config.js

/** @type {import('next').NextConfig} */

const nextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}

module.exports = nextConfig

TypeScriptJavaScript

next.config.ts

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}

export default nextConfig

Implementation

You can use the implementation property to specify the Sass implementation to use. By default, Next.js uses the sass package.

TypeScript

JavaScript

next.config.ts

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}

export default nextConfig

next.config.js

/** @type {import('next').NextConfig} */

const nextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}

module.exports = nextConfig

TypeScriptJavaScript

next.config.ts

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}

export default nextConfig

Sass Variables

Next.js supports Sass variables exported from CSS Module files.

For example, using the exported primaryColor Sass variable:

app/variables.module.scss

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

pages/_app.js

import variables from '../styles/variables.module.scss'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout color={variables.primaryColor}>
      <Component {...pageProps} />
    </Layout>
  )
}