NextJS 13.1.4 在添加 SCSS 支持时中断“无法找到模块 next/dist/compiled/sass-loader/fibres.js”

Question

全新安装 NextJS 后，我想添加 SCSS 支持。该文档非常清楚如何执行此操作。当我按照描述安装并添加 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
}

Answer 1

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

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

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

更新 2：另一个修复程序适用于较旧的 Node 版本，请通过此链接了解更多信息：https://github.com/vercel/next.js/issues/45052#issuecomment-1468754780