使用Vitest测试含Element Plus的Vue项目遇.scss扩展名未知错误

问题原因 #

当你在Vite配置中启用ElementPlus({ useSource: true })时，Element Plus会直接引入未编译的SCSS源码文件，但Vitest默认不会处理node_modules目录下的SCSS文件，因此触发Unknown file extension ".scss"错误。

解决方案 #

你需要针对测试环境调整配置，以下是两种可行方案：

方案1：给Vitest配置SCSS编译支持 #

首先安装SCSS预处理器依赖：

npm install -D sass

然后创建或修改vitest.config.js，添加SCSS处理规则：

import { defineConfig } from 'vitest/config';
import vue from '@vitejs/plugin-vue';
import ElementPlus from 'unplugin-element-plus/vite';

export default defineConfig({
  plugins: [vue(), ElementPlus({ useSource: true })],
  test: {
    environment: 'jsdom',
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 可选：若Element Plus需要全局SCSS变量，可在此配置
        additionalData: `@use "element-plus/theme-chalk/src/mixins/mixins.scss";`
      }
    }
  }
});

方案2：测试环境禁用useSource #

如果测试不需要依赖未编译的SCSS源码，可根据环境动态关闭useSource选项，让Element Plus使用编译后的CSS：

修改vite.config.js：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import ElementPlus from 'unplugin-element-plus/vite';

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue(),
      ElementPlus({
        useSource: mode !== 'test' // 测试环境自动禁用useSource
      })
    ],
  };
});

再创建vitest.config.js继承Vite配置：

import { defineConfig } from 'vitest/config';
import viteConfig from './vite.config';

export default defineConfig({
  ...viteConfig,
  test: {
    environment: 'jsdom',
  },
});

验证测试 #

完成配置后重新运行测试：

npx vitest

此时即可正常挂载包含Element Plus组件的组件，测试顺利执行。

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