Sass

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

首先，安装 sass：

Terminal

npm install --save-dev sass

值得注意的是：

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

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

自定义 Sass 选项

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

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

实现方式

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

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

Sass 变量

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

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

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>
  )
}