在Vite中导入SCSS文件为何触发MIME类型错误？

问题分析 #

你遇到的MIME类型错误，本质是Vite没有正确将SCSS文件编译为CSS，反而把它当作JavaScript模块加载了。结合你的场景——在src根目录时正常，移到src/app子目录后出错，且已安装sass-loader，核心原因是Vite不需要sass-loader，这个webpack生态的工具会干扰Vite内置的SCSS处理逻辑。

解决方案 #

1. 卸载多余的sass-loader #

Vite内置了SCSS预处理器支持，只需要sass依赖即可，执行命令卸载sass-loader：

npm uninstall sass-loader

2. 清理缓存并重启开发服务器 #

Vite的开发缓存可能残留错误的模块解析记录，执行带强制清理参数的启动命令：

npm run dev -- --force

或者手动删除项目根目录下的node_modules/.vite文件夹后重启。

3. 确认导入路径正确性 #

检查app.js中的导入语句import './app.scss';：

• 确保app.scss和app.js在同一目录下，相对路径无误
• 注意文件名大小写（Linux/macOS环境下大小写敏感）

4. 可选：显式配置SCSS预处理器（若仍有问题） #

在项目根目录创建或修改vite.config.js，添加SCSS预处理器配置，确保Vite正确识别：

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 可添加全局变量等自定义配置，例如：
        // additionalData: `@import "./src/app/_variables.scss";`
      }
    }
  }
})

补充说明 #

初始创建项目时在src根目录正常，是因为Vite对根目录文件的处理优先级更高，冲突未显现；移到子目录后，错误的sass-loader干扰了模块解析流程，导致SCSS文件未被正确编译，进而触发MIME类型错误。

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