css预处理器

CSS预处理器可以帮助我们编写更加可维护的CSS样式, CSS预处理器允许我们定义变量, 允许嵌套规则, 允许创建可重用的样式块.

less

使用less十分简单，我们只需要安装less即可

npm install less -D

scss

1. 使用sass依然很简单，直接安装sass即可

npm install -D sass

使用scss变量

page

app/page.jsx

import variables from './variables.module.scss'

export default function Page() {
    return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}

variables

app/variables.module.scss

$primary-color: #64ff00;

:export {
    primaryColor: $primary-color;
}