在使用 Next.js 进行开发时，有时会遇到使用 CSS 预处理器（如 Sass、Less）时失效的情况。这是因为 Next.js 在构建项目时使用的是服务器端渲染（SSR）模式，在这种模式下，在组件渲染时无法访问客户端的环境变量。
接下来将介绍一种解决方法，以实现在 Next.js 中使用 CSS 预处理器的效果。
安装依赖项
首先，需要安装 @zeit/next-sass 和 node-sass（如果使用 Sass）。可以使用以下命令进行安装：
--- ------- ---------- --------------- ---------
安装完成后，需要在 next.config.js 文件中添加以下代码：
----- -------- - ---------------------------
-------------- - ----------
----------- -----
----------------- -
-------------- --
--------------- ----------------------------
--
---上述代码使用 next-sass 来启用 Sass 和 CSS 模块化，并配置了本地 CSS 类名的命名规则。
引入 CSS 文件
接下来，需要在组件中引入 CSS 或 Sass 文件，并将其包含在 className 属性中。例如，在 index.js 组件中添加以下代码：
------ ------ ---- ----------------------
----- ----- - -- -- -
------ -
---- -----------------------------
--- ------------------------------- -----------
------
--
--
------ ------- ------在上述代码中，使用 import 来导入 CSS 或 Sass 文件，然后使用 className 属性来设置样式。
创建 CSS 或 Sass 文件
最后，我们需要创建一个 CSS 或 Sass 文件，并定义相关的样式规则。例如，可以在 index.module.scss 文件中添加以下代码：
---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ ----------------- -------- - ------ - ---------- ----- ------------ ----- ------ ----- -
上述代码定义了容器和标题的样式，以及背景颜色和字体颜色的属性。这些样式属性将在组件中的 className 属性中引用。
总结
通过使用 @zeit/next-sass 包和 node-sass 库，我们可以在 Next.js 中使用 CSS 预处理器。使用本文中提供的方法，你可以在 Next.js 项目中使用 Sass 或 Less 等预处理器，还可以更方便地添加和管理样式。希望这篇文章对你有帮助，祝你编写出更好的 Next.js 项目！
示例代码：
./pages/index.js：
------ ------ ---- ----------------------
----- ----- - -- -- -
------ -
---- -----------------------------
--- ------------------------------- -----------
------
--
--
------ ------- ------./pages/index.module.scss：
---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ ----------------- -------- - ------ - ---------- ----- ------------ ----- ------ ----- -
./next.config.js:
----- -------- - ---------------------------
-------------- - ----------
----------- -----
----------------- -
-------------- --
--------------- ----------------------------
--
---来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6538d1977d4982a6eb1eb366