React+Vite+Fluent UI项目报错：无法解析.scss文件路径

错误原因 #

你遇到的问题是Vite无法解析office-ui-fabric-react内部的SCSS文件导入，该库原本基于Webpack构建，其内部的SCSS导入逻辑和Vite的预处理器处理方式不兼容。

解决步骤 #

1. 修正组件导入路径并更新依赖包 #

office-ui-fabric-react已更名为@fluentui/react（v8版本），建议使用标准ES模块导入方式，替换原导入代码：

// 替换原有导入
import { TextField } from "@fluentui/react";
// 移除旧的导入：import { TextField } from "office-ui-fabric-react/lib/TextField";

如果还没安装最新包，执行安装命令：

npm install @fluentui/react --save
# 或使用yarn
yarn add @fluentui/react

2. 安装SCSS预处理器依赖 #

Vite不内置SCSS编译器，需要手动安装sass：

npm install sass --save-dev
# 或
yarn add sass -D

3. 清理不必要的本地SCSS导入 #

你导入的./TextField.Examples.scss大概率是从官方示例中复制的冗余文件，若未自定义该文件，直接删除这行导入代码即可：

// 删除此行
// import "./TextField.Examples.scss";

4. （可选）配置Vite优化依赖（若上述步骤无效） #

如果仍有解析问题，在vite.config.ts中添加依赖优化配置，强制ESBuild处理SCSS文件：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['@fluentui/react'],
    esbuildOptions: {
      loader: {
        '.scss': 'css',
      },
    },
  },
});

完成以上步骤后，重启Vite开发服务器即可正常运行项目。

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