迁移至Vite后如何消除Dart Sass遗留JS API弃用警告？

API 探路者

2026-6-18

问题

将项目从create-react-app迁移至Vite后，开发和构建时持续出现以下弃用警告，其余功能正常：

Deprecation [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

项目依赖如下：

{
  "dependencies": {
    "@heroicons/react": "^2.1.5",
    "@tanstack/react-table": "^8.17.3",
    "i18next": "^23.12.1",
    "i18next-browser-languagedetector": "^8.0.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-i18next": "^14.1.3",
    "react-indiana-drag-scroll": "^2.2.0",
    "react-toastify": "^10.0.5",
    "recharts": "^2.13.0-alpha.4",
    "recoil": "^0.7.7",
    "sass": "^1.79.1",
    "uuid": "^10.0.0"
  }
}

Node版本：v22.7.0

解决方案

这个警告源于Dart Sass的旧版JS API已被弃用，而当前Vite默认调用了该API。可通过以下方式消除警告：

升级Vite至最新稳定版：新版本Vite已适配Sass现代API，执行命令更新：
```
npm install vite@latest --save-dev
# 或使用yarn
yarn add vite@latest --dev
```
替换sass包为sass-embedded：这是Dart Sass官方推出的嵌入式版本，默认使用现代API，执行命令替换：
```
npm uninstall sass && npm install sass-embedded --save
# 或使用yarn
yarn remove sass && yarn add sass-embedded
```
手动配置Vite使用Sass现代API：若上述方法无效，在vite.config.js或vite.config.ts中添加如下配置：
```
export default {
  css: {
    preprocessorOptions: {
      sass: {
        api: 'modern-compiler'
      }
    }
  }
}
```