Next.js 内置支持与 Sass 集成，只需安装包并使用 .scss 和 .sass 两种扩展名。你可以通过 CSS Modules 和 .module.scss 或 .module.sass 扩展名使用组件级别的 Sass。
首先，安装 sass：
npm install --save-dev sass须知:
Sass 支持 两种不同的语法，每种都有自己的扩展名。
.scss扩展名要求你使用 SCSS 语法，
而.sass扩展名要求你使用 缩进语法（"Sass"）。如果你不确定选择哪种，请从
.scss扩展名开始，它是 CSS 的超集，并且不需要你学习
缩进语法（"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 = nextConfigNext.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>
}import variables from '../styles/variables.module.scss'
export default function MyApp({ Component, pageProps }) {
return (
<Layout color={variables.primaryColor}>
<Component {...pageProps} />
</Layout>
)
}