Next.js 项目中引入 sass 文件出现 Module build failed 错误的解决方法

如果你在使用 Next.js 开发前端项目时，尝试引入 sass 文件，可能会遇到如下错误提示：

Module build failed: Error: Cannot find module 'node-sass'

这是因为 Next.js 默认不支持 sass 文件，需要进行一些配置才能正常使用。本文将介绍如何解决这个问题，并提供详细的指导和示例代码。

解决方法

要在 Next.js 项目中引入 sass 文件，需要使用 sass-loader 和 node-sass 这两个依赖包。具体步骤如下：

1. 安装依赖包

在项目根目录下运行以下命令：

npm install sass-loader node-sass --save-dev

2. 配置 next.config.js 文件

在项目根目录下新建一个 next.config.js 文件，并添加以下内容：

const withSass = require('@zeit/next-sass')

module.exports = withSass({
  cssModules: true
})

这里使用了 @zeit/next-sass 这个依赖包，它能够自动将 sass 文件转换为 css 文件，并支持 css 模块化。

3. 引入 sass 文件

在页面或组件中引入 sass 文件，例如：

import styles from './styles.module.scss'

其中，styles.module.scss 是一个 sass 文件，它将被自动转换为 css 文件。

示例代码

以下是一个简单的示例代码，演示了如何在 Next.js 项目中使用 sass 文件：

styles.module.scss

$primary-color: #0070f3;

.title {
  font-size: 2rem;
  color: $primary-color;
}

index.js

-- -------------------- ---- -------
------ ------ ---- ----------------------

----- ---- - -- -- -
  ---- -------------------------
    ------ ------
  ------
-

------ ------- ----

总结

通过以上步骤，我们成功地解决了在 Next.js 项目中引入 sass 文件出现 Module build failed 错误的问题，并实现了 sass 文件的正常使用。希望这篇文章能够帮助到你，让你更加轻松地开发 Next.js 项目。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658a956beb4cecbf2dfce1d7