Vite React项目使用semantic-ui-less时theme.config找不到报错

问题原因 #

Semantic UI Less的内部组件Less文件依赖相对路径导入theme.config，但Vite默认的Less解析配置不会自动包含自定义配置目录，且不支持Webpack的~路径前缀，导致无法找到你放在src/semantic-ui/下的配置文件。

解决方案步骤 #

1. 修正theme.config中的路径 #

编辑./src/semantic-ui/theme.config：

• 替换Webpack风格的~路径前缀，适配Vite的路径解析：

  // 原内容
  @import (multiple) "~semantic-ui-less/theme.less";
  // 替换为
  @import (multiple) "../../node_modules/semantic-ui-less/theme.less";
  

• 修正@siteFolder的相对路径（相对于当前theme.config文件）：

  // 原内容
  @siteFolder : '../../src/semantic-ui/site';
  // 替换为
  @siteFolder : './site';
  

2. 配置Vite的Less预处理器 #

修改项目根目录的vite.config.js，添加Less的预处理器配置，让Less能识别自定义配置并启用JS支持：

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

export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      less: {
        // 将自定义配置目录加入Less的搜索路径
        includePaths: ['./src/semantic-ui'],
        // 全局注入theme.config，避免Semantic UI内部文件找不到配置
        additionalData: `@import "./theme.config";`,
        // Semantic UI Less需要启用JS才能正常编译
        javascriptEnabled: true,
      },
    },
  },
})

3. 调整入口文件的导入逻辑 #

在React入口文件（如src/main.jsx/main.tsx）中，确保先导入自定义配置，再导入Semantic UI的主Less文件：

import './semantic-ui/theme.config';
import 'semantic-ui-less/semantic.less';

验证执行 #

重启npm run dev，此时Less编译器应该能正确找到你的theme.config，不再抛出路径错误。

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