如何使用 Sass

Next.js 内置支持在安装 sass 包后集成 .scss 和 .sass 扩展名的 Sass 文件。您可以通过 CSS 模块及 .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 模块文件导出的 Sass 变量。

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

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

// 映射到根路径 `/`

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

export default function Page() {
  return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}