如何使用 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/** @type {import('next').NextConfig} */
const nextConfig = {
sassOptions: {
additionalData: `$var: red;`,
},
}
module.exports = nextConfig实现方式
您可以使用 implementation 属性指定要使用的 Sass 实现。默认情况下，Next.js 使用 sass 包。
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
sassOptions: {
implementation: 'sass-embedded',
},
}
export default nextConfig/** @type {import('next').NextConfig} */
const nextConfig = {
sassOptions: {
implementation: 'sass-embedded',
},
}
module.exports = nextConfigSass 变量
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>
}