如何在Vitest中获取样式？测试时获取样式返回空对象问题

问题核心是Vitest默认未配置CSS模块解析能力，导致导入的样式文件无法正确导出类名对象，仅返回空的默认导出。

解决步骤： #

1. 安装依赖

npm install -D @vitest/web-plugin css-loader sass-loader sass

2. 配置Vitest（vitest.config.js）

import { defineConfig } from 'vitest/config'
import web from '@vitest/web-plugin'

export default defineConfig({
  plugins: [web()],
  test: {
    environment: 'jsdom',
    css: {
      modules: {
        auto: /\_styles\.\w+$/i,
        localIdentName: '[local]--[hash:base64:5]',
        classNameStrategy: 'non-scoped',
      },
      preprocessorOptions: {
        scss: {}
      }
    }
  }
})

3. 调整导入方式（可选）
   可以尝试默认导入替代命名空间导入，适配部分配置场景：

import styles from '_styles.scss'

配置完成后，Vitest会按照你Webpack中的规则解析CSS模块，console.log(styles)就能输出包含类名的对象了。

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