Sass

Next.js 内置支持通过 .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.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;
}

pages/_app.js

import variables from '../styles/variables.module.scss'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout color={variables.primaryColor}>
      <Component {...pageProps} />
    </Layout>
  )
}

自定义 Sass 选项

Sass 变量

On this page