在现代网站开发中，CSS 是必不可少的一部分。@zeit/next-css 是一个增强了 Next.js 的 CSS 功能的 npm 包。它可以让你使用类似于 webpack 的方式来导入 CSS 文件，使得你可以更方便地管理 CSS，并使代码更结构化。
在本文中，我们将介绍如何使用 @zeit/next-css 包在 Next.js 项目中导入和使用 CSS 文件。
安装 @zeit/next-css 包
在使用 @zeit/next-css 包之前，你需要确认是否已经安装了 Next.js。如果没有，你需要执行以下命令：
--- ------- ------ ----
然后，你需要安装 @zeit/next-css 包：
--- ------- ------ --------------
导入 CSS 文件
现在，可以在你的项目中导入 CSS 文件了。你可以使用以下代码导入样式文件：
-- -------------- ------ --------------------- ------ ------- -- -- ---------- -----------
在这个例子中，我们已经导入了样式文件 ../styles/index.css。这个文件将会被打包并应用于页面。
如果你有多个样式表文件，你可以通过类似 webpack 的方式导入它们。例如：
-- --------------
------ ------ ---- ---------------------
------ ------------ ---- ----------------------
------ ------- -- -- -
---- -----------------------------
---- --------------------------------------
----- ----------------------------------
------
-注意，在这个例子中，我们使用了样式文件的类名，在 CSS 文件中定义类名，如下所示：
-- ---------------- -- ---------- - -------- ----- --------------- ------- - ----- - ---------- -- - --- -- ----------------- -- ---- - --- -
配置 next.config.js 文件
为了使 @zeit/next-css 正确地处理 CSS 文件，你需要在项目的根目录中创建一个 next.config.js 文件，并在里面设置你的配置。
-- -------------- ----- ------- - ------------------------- -------------- - --------- -- ------ ------- ---- -- --
如果你需要其他配置，可以在 withCSS 的选项中加入它们。例如：在开发环境中打印信息：
-- --------------
----- ------- - -------------------------
-------------- - ---------
--------------- -------- -
--------------------
------ ------
-
--为生产环境优化 CSS
默认情况下，@zeit/next-css 在开发环境和生产环境中都处理 CSS，但是在生产环境中，它不会把 CSS 提取出来。这意味着在生产环境中，你的网站页面可能会加载整个样式表，而不只是当前页面所需要的部分。
为了优化 CSS，你可以指定在生产环境中把样式表打包到一个单独的文件中。
-- --------------
----- ------- - -------------------------
-------------- - ---------
----------------- -
---- -----
-
--这样，你就可以在生产环境中得到一个包含所有页面所需样式的单独文件。
结论
@zeit/next-css 是一个优秀的工具，它可以为 Next.js 项目添加对于导入和管理 CSS 的支持。它可以使得 CSS 代码更加结构化，并为生产环境提供更好的支持。
在本文中，我们涵盖了如何安装和使用 @zeit/next-css 包，并演示了在项目中导入和管理 CSS 文件的步骤。希望这篇文章能够帮助你更好地使用 Next.js 和管理 CSS。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f3fa0fedbf7be33b25671af