样式加载

NextJS官方给出了几种样式加载解决方案，包括CSS Module、Tailwind CSS、CSS-in-JS和Sass，它们各有优劣，我在开发个人项目时倾向于使用TailwindCSS，但在团队开发时还是倾向于心智负担更低的CSS或是SaSS（ScSS语法），这些方式也可以结合使用。

使用CSS Module

下面例子中，我们创建了dashboard.module.css文件。

|_app
  |_dashboard
    |_page.jsx
    |_dashboard.module.css

NextJS集成了CSS Module对应的Loader，默认情况下以.module.css后缀结尾的文件可以被识别为CSS Module，在JavaScript代码中我们使用import引入即可。

.siteMain {
  background-color: red;
}

import styles from "@/app/dashboard/dashboard.module.css";

const Page = () => {
  return <div className={styles.siteMain}>dasdas</div>;
};

export default Page;

代码中我们使用styles.siteMain作为<div>的className属性，它对应CSS文件中定义的样式表.siteMain {}。

使用Sass Module

Sass是一种CSS预处理语言，同类方案还有Less等，Sass支持Sass和Scss两种语法，我个人比较倾向于使用Scss，它和Less有些相似，也很容易掌握。NextJS内置了Sass的支持（支持Sass语法和Scss语法），但我们需要额外安装Sass预处理器。

npm install --save-dev sass

安装完成后我们就可以直接使用Sass了，类似CSS Module，我们的Sass源码也需要以.module.sass或.module.scss后缀结尾。引入Sass Module写法和CSS Module完全一致。

import styles from "@/app/dashboard/dashboard.module.scss";

const Page = () => {
  return <div className={styles.siteMain}>dasdas</div>;
};

export default Page;

使用TailwindCSS

TailwindCSS的配置相对复杂一些，通常来说我们会在创建项目时选择使用TailwindCSS，此时工程会自动配置并安装相关的依赖。如果手动安装则需要执行以下命令。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

然后编写tailwind.config.js配置文件。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}

接着在工程的global.css中引入TailwindCSS的基础样式指令。

@tailwind base;
@tailwind components;
@tailwind utilities;

之后我们保证工程的app/layout.jsx引入了该样式文件即可。此时我们就可以直接使用TailwindCSS了。

const Page = () => {
  return <div className="text-white bg-blue-300 p-4 rounded-sm">dasdas</div>;
};

export default Page;