在本章中，我们将深入探讨如何使用 Next.js 内置的 CSS 支持。Next.js 提供了一种简单而强大的方式来处理样式表，使得开发者能够轻松地将 CSS 文件引入到项目中，并确保这些文件能够在构建过程中正确地被处理和优化。
引入全局样式表
首先，我们来看一下如何引入全局样式表。全局样式表适用于整个应用，这意味着它们将在每个页面上都生效。为了引入全局样式表，我们需要创建一个或多个 .css 文件，并将其放置在项目的某个位置。通常，我们将这些文件放在 styles 目录下，例如 global.css 或 main.css。
创建全局样式表
假设我们在 styles 目录下创建了一个名为 global.css 的文件。在这个文件中，我们可以定义一些通用的样式规则，比如字体、颜色和布局等。
-- -------------------- ---- -------
-- ----------------- --
---- -
------------ ------ -----------
------ -----
----------------- --------
-
---------- -
---------- -------
------- - -----
-------- - -----
-引入全局样式表
为了使这些样式在整个应用中生效，我们需要在项目中的某个地方引入这个全局样式表。一种常见的做法是在 _app.js 文件中引入它。_app.js 是一个特殊的文件，它允许你在所有页面之间共享逻辑，包括引入全局样式。
// pages/_app.js
import '../styles/global.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;通过这种方式，我们确保了 global.css 中定义的所有样式都会被应用到整个应用中。
使用 CSS Modules
除了全局样式表之外，Next.js 还支持 CSS Modules。CSS Modules 允许你为每个组件创建独立的样式文件，从而避免样式冲突。这种做法特别适合于大型应用，可以显著提高代码的可维护性和可读性。
创建 CSS 模块文件
假设我们有一个名为 Button 的 React 组件，并且我们希望为这个组件创建一个独立的样式文件。为此，我们可以在 styles 目录下创建一个名为 button.module.css 的文件。
-- -------------------- ---- -------
-- ------------------------ --
------- -
----------------- --------
------- -----
------ ------
-------- ---- -----
----------- -------
---------------- -----
-------- -------------
---------- -----
------- --- ----
------- --------
-
------------- -
----------------- --------
-在组件中使用 CSS 模块
接下来，我们需要在 Button 组件中导入并使用这个 CSS 模块文件。为了导入 CSS 模块文件，我们需要使用动态导入语法，并且将文件名以 .module.css 结尾。
-- -------------------- ---- -------
-- --------------------
------ ------ ---- -----------------------------
----- ------ - -- -------- -- -- -
------- --------------------------
----------
---------
--
------ ------- -------在这个例子中，我们通过 styles.button 访问到了 button.module.css 文件中定义的 .button 类。这样，我们就成功地将 CSS 模块与 React 组件结合在一起了。
动态导入 CSS 文件
除了静态导入全局样式表和 CSS 模块文件之外，Next.js 还支持动态导入 CSS 文件。动态导入允许你在运行时根据条件加载不同的样式表，这对于实现主题切换等功能非常有用。
动态导入 CSS 文件
假设我们有一个功能需要根据用户的偏好动态改变应用的主题。我们可以创建多个 CSS 文件，每个文件对应一种主题，并且在运行时动态选择并加载相应的 CSS 文件。
-- -------------------- ---- -------
-- --------------
------ ------- ---- ---------------
------ - -------- - ---- --------
----- --------------- - ---------- -- ----------------------------------------- - ---- ----- ---
----- ---------------- - ---------- -- ------------------------------------------ - ---- ----- ---
-------- ---------- -
----- ------- --------- - ------------------
----- ----------- - -- -- -
-------------- --- ------- - ------ - ---------
--
------ -
-----
------- ---------------------------- --------------
------ --- ------ -- ------ --- ---------------------------------
------ --- ------- -- ------ --- ----------------------------------
------
--
-
------ ------- ---------在这个例子中，我们使用 useState 来管理当前的主题状态，并且根据这个状态动态地决定是否加载相应的 CSS 文件。当用户点击按钮时，主题会从一种切换到另一种，并且应用相应的样式。
总结
通过以上介绍，我们已经了解了如何在 Next.js 应用中使用内置的 CSS 支持。无论是引入全局样式表、使用 CSS 模块还是动态导入 CSS 文件，Next.js 都提供了灵活而强大的工具来帮助开发者管理应用的样式。掌握了这些技术后，你将能够更加高效地创建美观且易于维护的 Web 应用程序。
