Menu

Sass

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

首先，安装 sass：

Terminal
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 Module 文件中导出 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>;
}