Vite(React+TS)项目启动报错：Preprocessor dependency "sass" failed to load

云原生阿岚

2026-7-8

Vite React+TS项目启动报错：Preprocessor dependency "sass" failed to load

问题描述

在Vite（React+TS）项目完成依赖安装后，执行yarn dev启动项目时出现如下报错：

[plugin:vite:css] Preprocessor dependency "sass" failed to load:
Cannot read properties of undefined (reading 'pop')

该项目在个人笔记本可正常运行，但克隆到工作电脑后出现此问题。项目的package.json配置如下：

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-use-websocket": "3.0.0",
    "sass": "^1.69.3"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

解决方案

清理依赖缓存并重新安装
删除本地依赖文件和锁文件，清空yarn缓存后重新安装：

# macOS/Linux
rm -rf node_modules yarn.lock
yarn cache clean
yarn install

# Windows
rmdir /s /q node_modules
del yarn.lock
yarn cache clean
yarn install

调整sass版本
当前sass@1.69.3与vite@4.4.5理论兼容，但可尝试锁定更稳定的版本，将package.json中sass的版本改为^1.68.0，之后重新执行上述安装命令。
统一Node.js版本
检查工作电脑与个人笔记本的Node.js版本是否一致（执行node -v查看），sass对Node版本有要求，建议使用LTS版本（如18.x或20.x）。版本不一致时，可通过nvm等版本管理工具切换。
排查Vite配置问题
检查项目的vite.config.ts中是否存在错误的preprocessorOptions配置，若有，暂时注释该配置后重新启动项目测试。