如果你在使用 Next.js 开发前端项目时，尝试引入 sass 文件，可能会遇到如下错误提示：
------ ----- ------- ------ ------ ---- ------ -----------
这是因为 Next.js 默认不支持 sass 文件，需要进行一些配置才能正常使用。本文将介绍如何解决这个问题，并提供详细的指导和示例代码。
解决方法
要在 Next.js 项目中引入 sass 文件，需要使用 sass-loader 和 node-sass 这两个依赖包。具体步骤如下：
1. 安装依赖包
在项目根目录下运行以下命令：
--- ------- ----------- --------- ----------
2. 配置 next.config.js 文件
在项目根目录下新建一个 next.config.js 文件，并添加以下内容：
----- -------- - -------------------------- -------------- - ---------- ----------- ---- --
这里使用了 @zeit/next-sass 这个依赖包，它能够自动将 sass 文件转换为 css 文件，并支持 css 模块化。
3. 引入 sass 文件
在页面或组件中引入 sass 文件，例如：
------ ------ ---- ----------------------
其中，styles.module.scss 是一个 sass 文件，它将被自动转换为 css 文件。
示例代码
以下是一个简单的示例代码，演示了如何在 Next.js 项目中使用 sass 文件：
styles.module.scss
--------------- -------- ------ - ---------- ----- ------ --------------- -
index.js
------ ------ ---- ----------------------
----- ---- - -- -- -
---- -------------------------
------ ------
------
-
------ ------- ----总结
通过以上步骤，我们成功地解决了在 Next.js 项目中引入 sass 文件出现 Module build failed 错误的问题，并实现了 sass 文件的正常使用。希望这篇文章能够帮助到你，让你更加轻松地开发 Next.js 项目。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/658a956beb4cecbf2dfce1d7