运行Vitest时出现Dart Sass旧版JS API弃用警告求解决

问题核心 #

尽管已经在Vite和Vitest配置中指定了api: 'modern-compiler'，但Vitest的CSS预处理器配置可能未正确传递到Sass编译流程，或是存在第三方依赖仍在调用旧版Sass JS API，导致警告出现。

可行解决方案 #

1. 通过环境变量强制禁用旧API #

在package.json的test命令中直接注入环境变量，强制Sass使用现代API，绕过配置层的传递问题：

{
  "scripts": {
    "test": "SASS_USE_LEGACY_API=false vitest"
  }
}

2. 排查依赖并处理 #

• 升级sass版本：旧版本可能对modern-compiler支持不完善，执行npm update sass或yarn upgrade sass更新到最新稳定版。
• 屏蔽第三方依赖引发的警告：如果是项目依赖（如UI组件库）调用旧API，可在vitest.setup.ts中临时过滤警告：

  beforeAll(() => {
    const originalWarn = console.warn;
    console.warn = (...args) => {
      if (typeof args[0] === 'string' && args[0].includes('Deprecation Warning: The legacy JS API is deprecated')) {
        return;
      }
      originalWarn(...args);
    };
  });
  

3. 确保Vitest配置完整生效 #

放弃mergeConfig，直接在Vitest配置中完整复制Vite的CSS相关配置，避免合并时出现配置丢失：

// vitest.config.js
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import * as path from 'node:path'
import dynamicImport from 'vite-plugin-dynamic-import'

export default defineConfig({
  plugins: [react(), dynamicImport()],
  resolve: {
    alias: {
      app: path.resolve(__dirname, './src', 'app'),
      pages: path.resolve(__dirname, './src', 'pages'),
      widgets: path.resolve(__dirname, './src', 'widgets'),
      features: path.resolve(__dirname, './src', 'features'),
      entities: path.resolve(__dirname, './src', 'entities'),
      shared: path.resolve(__dirname, './src', 'shared'),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler',
      },
    },
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './vitest.setup.ts',
  },
})

内容的提问来源于stack exchange，提问作者Роман Василаки