Next.js集成Sass时安装后仍报错，求解决方案

问题详情 #

用yarn create next-app创建Next.js项目（全默认配置），把page.module.css重命名为page.module.scss后，执行yarn add sass安装Sass支持，但运行next build时反复出现以下错误：

To use Next.js' built-in Sass support, you first need to install `sass`.
Run `npm i sass` or `yarn add sass` inside your workspace.

重复安装sass甚至尝试安装node-sass都无法解决，复现步骤：

• 执行yarn create next-app，项目命名next-sass-test，其余选默认选项
• 进入项目目录，执行mv page.module.css page.module.scss; rm page.module.css修改样式文件后缀
• 执行yarn add sass
• 运行next build触发错误

解决方法 #

• 重新安装依赖：先查看package.json里是否有sass依赖，执行yarn list sass确认是否安装成功。如果没找到，删除node_modules和yarn.lock，再依次执行yarn install和yarn add sass。
• 清除构建缓存：执行next clean清除Next.js的缓存文件，之后再运行next build试试。
• 升级兼容版本：确保Next.js和sass版本兼容，Next.js 12+建议搭配sass^1.32.0及以上版本，执行yarn upgrade next sass升级到最新兼容版本。
• 检查样式引用：确认page.js里的样式导入路径已经改成import styles from './page.module.scss'，如果还是引用旧的.css文件也会触发错误。
• 移除废弃依赖：node-sass已停止维护，Next.js现在只支持官方sass包（dart-sass），执行以下命令清理：

  yarn remove node-sass
  yarn add sass
  

• 排查工作区配置：如果项目在Yarn工作区中，确保sass安装在当前项目目录下，而非工作区根目录，或者调整工作区配置明确依赖范围。

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