如何使用 Sass

安装 `sass` 包后，Next.js 内置支持通过 `.scss` 和 `.sass` 扩展名集成 Sass。你可以通过 CSS Modules 和 `.module.scss` 或 `.module.sass` 扩展名使用组件级别的 Sass。

首先，安装 `sass`

npm install --save-dev sass

须知:

Sass 支持两种不同的语法，每种都有自己的扩展名。`.scss` 扩展名要求你使用 SCSS 语法，而 `.sass` 扩展名要求你使用缩进语法（"Sass"）。

如果你不确定选择哪种，请从 `.scss` 扩展名开始，它是 CSS 的超集，并且不需要你学习缩进语法（"Sass"）。

自定义 Sass 选项

如果你想配置 Sass 选项，请在 `next.config` 中使用 `sassOptions`。

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}
 
export default nextConfig

实现

你可以使用 `implementation` 属性来指定要使用的 Sass 实现。默认情况下，Next.js 使用 `sass` 包。

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}
 
export default nextConfig

Sass 变量

Next.js 支持从 CSS Module 文件导出的 Sass 变量。

例如，使用导出的 `primaryColor` Sass 变量

$primary-color: #64ff00;
 
:export {
  primaryColor: $primary-color;
}

// maps to root `/` URL
 
import variables from './variables.module.scss'
 
export default function Page() {
  return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}