Sass

Next.js在安装了sass包之后，内置支持与Sass集成，支持.scss和.sass扩展名。 您可以通过CSS模块和.module.scss或.module.sass扩展名使用组件级Sass。

首先，安装sass：

npm install --save-dev sass

note

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

如果不确定选择哪种语法，请从.scss扩展名开始，它是CSS的超集，无需学习缩进语法（"Sass"）。

自定义Sass选项

如果要配置Sass编译器，请在next.config.js中使用sassOptions。

next.config.js

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

Sass变量

Next.js支持从CSS模块文件导出的Sass变量。

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

app/variables.module.scss

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

app/page.js

// 映射到根URL `/`
import variables from './variables.module.scss'

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