龙岗南联网站建设高端网站制作技术
不同于 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 文件的导入样式。