网站建设费用高低有什么区别_钦州网站推广_网站流量统计工具_发布新闻稿

全局样式 Global CSS

1. 默认已创建，即 src\app\globals.css，可根据需要修改

2. 默认在全局布局中导入
   src\app\layout.tsx

   import "./globals.css";
   

组件样式 CSS Modules

1. 新建文件 src\app\test\styles.module.css

   .red {color: red;}
   

2. 导入目标页面使用
   src\app\test\page.tsx

   import styles from "./styles.module.css";export default function Page() {return <main className={styles.red}>主体内容</main>;
   }
   

最终效果如下：

字体的实现见 https://blog.csdn.net/weixin_41192489/article/details/145625560

CSS 框架 Tailwind CSS

创建项目时，选择采用 Tailwind CSS 即可自动集成使用

Tailwind CSS 官网为 https://tailwindcss.com/docs/installation/using-vite

Tailwind CSS 实用教程见 https://blog.csdn.net/2401_83384536/article/details/140352836

使用范例

<h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>

CSS 预处理 Sass

1. 安装 sass

   pnpm i --save-dev sass
   

2. 在目标页面文件同目录下创建 scss 文件，如 src\app\test\test.module.scss

   .container {background-color: yellow;h1 {color: red;}
   }
   

3. 页面中导入使用
   src\app\test\page.tsx

   import styles from "./test.module.scss";export default function Home() {return (<div className={styles.container}><h1>在 Next.js 中使用 Sass!</h1></div>);
   }
   

效果如下

组件中编写样式 styled-jsx

Next.js 内置支持 styled-jsx , 但仅适用于客户端组件

// 客户端组件
"use client";
export default function Page() {return (<><div><h1>在 Next.js 中使用 Sass!</h1></div><style jsx>{`h1 {color: red;}`}</style></>);
}