Skip to content

NextJS中文文档 - Sass

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

首先,安装 sass

bash
npm install --save-dev sass

提示

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

如果你不确定选择哪一个,可以从 .scss 扩展名开始,它是 CSS 的超集,不需要你学习缩进语法("Sass")。

自定义 Sass 选项

如果你想配置 Sass 选项,请在 next.config 中使用 sassOptions

ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}

export default nextConfig
js
/** @type {import('next').NextConfig} */

const nextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}

module.exports = nextConfig

实现

你可以使用 implementation 属性指定要使用的 Sass 实现。默认情况下,Next.js 使用 sass 包。

ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}

export default nextConfig
js
/** @type {import('next').NextConfig} */

const nextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}

module.exports = nextConfig

Sass 变量

Next.js 支持从 CSS Module 文件导出 Sass 变量。

例如,使用导出的 primaryColor Sass 变量:

scss
$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

🎉有任何问题,欢迎联系我

WeChat QR Code
WeChat
QQ QR Code
QQ

赣ICP备2023003243号