不同于 nuxt ，next 的样式绝大部分都需要手动导入。
全局样式
使用 sass 先安装 npm i sass -D 。
我们可以定义一个 styles 文件，存放全局样式。
variables.scss
$fs30: 30px;
@mixin border() {
border: 1px solid red;
}
main.scss
@use './variables' as *;
$fsColor: lightgreen;
.global-style {
color: $fsColor;
@include border();
}
globals.css
.global-border {
border: 1px solid black;
}
import MyButton from "@/components/my-button";
import Head from "next/head";
import '../styles/globals.css'
import '@/styles/main.scss'
export default function Home() {
return (
<>
<Head>
<title>我是title</title>
<meta name="description" content="Generated by create next app"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" href="/favicon.ico"/>
</Head>
<div className="global-style">Welcome to my website! 你好</div>
<MyButton/>
</>
);
}
局部样式
可以定义一个该文件夹下的 xxx.module.css 文件：
.about-color {
color: hotpink;
}
import React from 'react';
import Link from "next/link";
import styles from './page.module.css'
function Page(props) {
return (
<>
<div className={styles['about-color']}>我是about页</div>
<Link href="/"> go to home</Link>
</>
);
}
export default Page;
同时 支持从CSS module 文件导出（export）的 Sass 变量。
app/variables.module.scss
$primary-color: #64ff00;
:export {
primaryColor: $primary-color;
}
app/page.jsx
import variables from './variables.module.scss'
export default function Page() {
return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}
所以从上面我们可以看出，当添加了 module 后缀的 css 将被模块化，可以直接以 一个变量 styles 的形式导入使用，否则只能使用常规的 导入 css 文件的导入样式。