Skip to main content

Sass

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

首先, 安装sass:

npm install --save-dev sass

您需要知道:

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

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

自定义 Sass 选项​

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

const path = require("path");

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

Sass 变量​

Next.js 支持从 CSS 模块文件导出的 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>;
}