如何在Nuxt中配置SASS/SCSS及sass-loader，解决版本不兼容报错

问题根因 #

报错核心是依赖版本不兼容：Nuxt 2.x 默认内置 Webpack 4 版本，你安装的sass-loader@12.x仅支持 Webpack 5，同时环境中存在的Webpack 5版本与Nuxt要求的Webpack 4冲突，导致Webpack加载规则解析失败。

解决步骤 #

• 卸载当前不兼容的依赖

# npm 用户执行
npm uninstall sass-loader fibers webpack
# yarn 用户执行
yarn remove sass-loader fibers webpack

• 安装适配Nuxt 2的兼容版本
  sass-loader@10.x是最后一个支持Webpack 4的版本，且当前sass包已经内置了原fibers的能力，无需额外安装fibers，安装版本和警告提示的期望版本完全匹配即可：

# npm 用户执行
npm install sass sass-loader@~10.1.1 -D
# yarn 用户执行
yarn add sass sass-loader@~10.1.1 -D

• 清理缓存重启项目
  如果启动仍报错，删除项目根目录下的node_modules/.cache文件夹、package-lock.json（或yarn.lock）文件，再重新执行npm install后启动项目即可。

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