Vite(React+TypeScript)中Sass依赖未找到问题求助

关于是否需要引入Sass的解答 #

不需要手动在项目代码里额外引入Sass。Vite原生支持Sass预处理器，只要正确安装依赖，直接创建.scss/.sass文件并在组件中导入即可使用。

错误原因及解决步骤 #

你遇到的“Preprocessor dependency "sass" not found”错误，大概率是以下几个原因导致的，按顺序排查：

• 安装命令拼写错误
  你执行的npm i saas是错误的，正确的包名是sass（少了一个s）。先卸载错误安装的包，再重新安装正确的依赖：

  npm uninstall saas
  npm install sass --save-dev
  

  注：添加--save-dev是因为Sass属于开发依赖，不需要打包到生产环境。

• 未重启Vite开发服务器
  安装新依赖后，Vite不会自动识别，需要关闭当前运行的npm run dev服务，重新启动一次，让服务器读取新安装的依赖。

• 样式文件扩展名错误
  确认你的样式文件扩展名是.scss（不是你写的app.sccs，这里属于拼写错误），扩展名错误会导致Vite无法识别并调用对应的预处理器。

• 检查依赖安装状态（可选）
  如果上述步骤都无效，打开项目根目录的package.json，查看devDependencies里是否有sass条目。如果没有，重新执行安装命令；如果有，删除node_modules和package-lock.json，重新执行npm install，再重启服务。

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