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;
}