NextJS 13.1.4 在添加 SCSS 支持时中断\“找不到模块 next/dist/compiled/sass-loader/fibers.js\”答案

【问题标题】：NextJS 13.1.4 breaks when adding SCSS support "Cannot find module next/dist/compiled/sass-loader/fibers.js"NextJS 13.1.4 在添加 SCSS 支持时中断\“找不到模块 next/dist/compiled/sass-loader/fibers.js\”
【发布时间】：2023-02-06 02:14:34
【问题描述】：

通过全新安装 NextJS，我想添加 SCSS 支持。 documentation 很清楚如何做到这一点。当我按照描述安装并添加 scss 导入时，如下所示：

import "@/styles/styles.scss";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

然后运行npm run dev。在浏览器中，我的页面不断加载。当我退出脚本并删除 import "@/styles/styles.scss"; 行，然后运行 dev 命令时，该页面将显示在我的浏览器中，但是当我再次启用 scss 导入时，出现编译错误。

error - unhandledRejection: Error: Cannot find module '/...../node_modules/next/dist/compiled/sass-loader/fibers.js'
    at webpackEmptyContext (/...../node_modules/next/dist/compiled/sass-loader/cjs.js:1:11235)
    at getSassOptions (/.....//node_modules/next/dist/compiled/sass-loader/cjs.js:1:5586)
    at Object.loader (/.....//node_modules/next/dist/compiled/sass-loader/cjs.js:1:2683)
    at LOADER_EXECUTION ......
 {
  code: 'MODULE_NOT_FOUND
}

【问题讨论】：

可能值得在 github 上创建一个问题
当您在组件中添加图像并且图像不存在于公共文件夹中时，Next.js 甚至会中断，甚至删除。 .next 文件夹不起作用。对我来说，将图像添加到公用文件夹，然后删除一段有效的代码。

标签： javascript next.js sass

【解决方案1】：

这是自版本 13.1.2 以来的一个已知问题，似乎只有 13.1.1 可以与 SASS 一起使用。

错误报告在这里：https://github.com/vercel/next.js/issues/45052

更新：大多数人似乎已经通过升级到 Node 16 及更高版本解决了这个问题。它为我解决了这个问题。

【讨论】：

【解决方案2】：

这个错误似乎在下一个版本 13.1.6 中得到修复

请注意，升级到 next 的该版本将导致构建在节点 v14 上挂起。不过，切换到节点 16 或 18 似乎工作正常。

【讨论】：

您的答案可以通过其他支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写出好的答案的信息in the help center。