Sass
Next.js 内置支持在使用 .scss
和 .sass
扩展安装包后与 Sass 集成。你可以通过 CSS 模块和 .module.scss
或 .module.sass
扩展使用组件级 Sass。
¥Next.js has built-in support for integrating with Sass after the package is installed using both the .scss
and .sass
extensions. You can use component-level Sass via CSS Modules and the .module.scss
or .module.sass
extension.
首先,安装 sass
:
¥First, install sass
:
npm install --save-dev sass
很高兴知道:
¥Good to know:
Sass 支持 两种不同的语法,每个都有自己的扩展。
.scss
扩展要求你使用 SCSS 语法,而.sass
扩展要求你使用 缩进语法 ("Sass")。¥Sass supports two different syntaxes, each with their own extension. The
.scss
extension requires you use the SCSS syntax, while the.sass
extension requires you use the Indented Syntax ("Sass").如果你不确定选择哪个,请从
.scss
扩展开始,它是 CSS 的超集,并且不需要你学习缩进语法 ("Sass")。¥If you're not sure which to choose, start with the
.scss
extension which is a superset of CSS, and doesn't require you learn the Indented Syntax ("Sass").
自定义 Sass 选项
¥Customizing Sass Options
如果要配置 Sass 编译器,请在 next.config.js
中使用 sassOptions
。
¥If you want to configure the Sass compiler, use sassOptions
in next.config.js
.
const path = require('path')
module.exports = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
}
Sass 变量
¥Sass Variables
Next.js 支持从 CSS 模块文件导出的 Sass 变量。
¥Next.js supports Sass variables exported from CSS Module files.
例如,使用导出的 primaryColor
Sass 变量:
¥For example, using the exported primaryColor
Sass variable:
$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>
}