NextJS 13.1.4添加SCSS支持报错：无法找到fibers.js模块

问题场景 #

全新安装Next.js后，按照官方文档步骤添加SCSS支持，安装依赖后在_app.tsx中添加SCSS导入：

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

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

运行npm run dev后浏览器页面持续加载，移除SCSS导入语句后重新启动dev服务，页面可正常显示，但再次添加该导入后出现编译错误：

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'
}

解决方法 #

1. 清理依赖并重新安装 #

• 删除node_modules文件夹：

  # macOS/Linux
  rm -rf node_modules
  # Windows
  rmdir /s /q node_modules
  

• 删除package-lock.json（npm）或yarn.lock（yarn）文件
• 重新安装依赖：

  npm install
  # 或使用yarn
  yarn install
  

2. 匹配Next.js与sass版本 #

Next.js对sass版本有兼容性要求，安装对应版本的sass：

# 示例：安装适配的sass版本，版本号根据你的Next.js版本调整
npm install sass@^1.60.0

3. 禁用fibers配置 #

在项目根目录的next.config.js中添加以下配置，强制禁用fibers：

module.exports = {
  sassOptions: {
    fiber: false,
  },
};

4. 重启开发服务 #

完成上述操作后，完全终止当前的npm run dev进程，再重新启动服务。

内容的提问来源于stack exchange，提问作者Robert Cabri