Vitest问题：无法导入由.scss编译生成的.css文件

方案1：通过路径别名映射.css到.scss #

Vitest 基于 Vite，你可以在配置文件（vitest.config.ts 或 vite.config.ts）里添加路径别名规则，让 Vitest 把 .css 导入自动转成对应的 .scss 文件：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    // 这里放你的其他测试配置，比如测试环境、覆盖率设置等
  },
  resolve: {
    alias: [
      {
        find: /^(.*)\.css$/,
        replacement: '$1.scss',
      },
    ],
  },
});

配置完成后，代码里的 import "my-styles.css" 会被 Vitest 自动映射到 my-styles.scss，不会再报文件不存在的错误。

方案2：直接Mock所有.css导入 #

如果你的测试不需要用到样式逻辑，最简单的办法就是把 .css 文件的导入 mock 掉：

1. 创建测试初始化文件，比如 vitest.setup.ts：

import { vi } from 'vitest';

// 所有.css导入都返回空对象，跳过文件查找流程
vi.mock(/\.css$/, () => ({}));

2. 在 Vitest 配置里指定这个初始化文件：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    setupFiles: ['./vitest.setup.ts'],
    // 其他测试配置
  },
});

方案3：让Vitest自动编译SCSS（适合需要样式逻辑的测试） #

要是你测试时需要实际编译 SCSS 为 CSS，确保项目已安装 sass 依赖（你构建时已经在用，应该已安装），可以这么配置：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    // 其他测试配置
  },
  resolve: {
    extensions: ['.css', '.scss', '.js', '.ts'],
  },
  css: {
    preprocessorOptions: {
      scss: {
        includePaths: ['node_modules'], // 和你构建时的-I参数保持一致
      },
    },
  },
});

不过这种场景下，方案1的别名映射更直接，能精准匹配你用 .css 扩展名导入的需求。

内容的提问来源于stack exchange，提问作者Ryan Pierce Williams