如何在 Next.js 中使用 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 '../styles/variables.module.scss'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <Layout color={variables.primaryColor}>
      <Component {...pageProps} />
    </Layout>
  )
}