从Craco迁移到Vite后.less文件路径解析异常求助

问题1：@import '~antd/dist/antd.less' 导入失败 #

报错信息 #

Pre-transform error: [less] '~antd/dist/antd.less' wasn't found. Tried - C:...\ais-front\src\shared\styles~antd\dist\antd.less,node_modules~antd\dist\antd.less

解决方法 #

Vite对Less中~前缀的处理逻辑和Webpack/Craco不同，无需配置~别名，直接移除~即可正常导入：

@import 'antd/dist/antd.less';

若需保留~前缀，可在Less预处理器配置中添加node_modules路径解析：

// vite.config.js
import path from 'path';

export default defineConfig({
  // ...其他配置
  css: {
    preprocessorOptions: {
      less: {
        math: "always",
        javascriptEnabled: true,
        paths: [path.resolve(__dirname, 'node_modules')]
      },
    },
  },
})

同时确保已安装依赖：

npm install less less-loader --save-dev

问题2：Less文件中绝对路径被当作相对路径拼接 #

报错信息 #

Pre-transform error: [less] 'shared/styles/colors' wasn't found. Tried - C:...\src\components\header\shared\styles\colors.less

解决方法 #

vite-tsconfig-paths插件仅处理JS/TS文件，不会解析Less预处理器的路径，需通过以下两种方式修复：

方案1：使用@前缀+别名配置

修改Less导入语句，添加@前缀：

@import '@/shared/styles/colors.less';

在vite.config.js中添加@别名，指向src目录：

// vite.config.js
import path from 'path';

export default defineConfig({
  // ...其他配置
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
    ],
  },
})

方案2：配置Less全局路径解析

在Less预处理器配置中添加src目录路径，让Less直接识别src下的绝对路径：

// vite.config.js
import path from 'path';

export default defineConfig({
  // ...其他配置
  css: {
    preprocessorOptions: {
      less: {
        math: "always",
        javascriptEnabled: true,
        paths: [path.resolve(__dirname, 'src')]
      },
    },
  },
})

问题3：Less中不带src前缀的绝对路径无法识别，但TSX中正常 #

该问题与问题2本质一致：tsconfig的baseUrl仅被TS编译器识别，Less预处理器不会读取该配置。采用上述方案1或方案2即可解决。

完整修改后的vite.config.js #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths';
import path from 'path';

export default defineConfig({
  plugins: [
      react(),
      tsconfigPaths(),
  ],
  css: {
      preprocessorOptions: {
          less: {
              math: "always",
              javascriptEnabled: true,
              paths: [
                path.resolve(__dirname, 'node_modules'),
                path.resolve(__dirname, 'src')
              ]
          },
      },
  },
  resolve: {
       alias: [
           { find: '@', replacement: path.resolve(__dirname, 'src') },
       ],
  },
})

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