[plugin:vite:css] '~antd/es/style/themes/index.less' wasn't found.🐛[BUG]

[nyhxiaoning]

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

我给React中引入vite脚手架，然后配置了

📷 复现步骤

第一步首先将项目换成vite+react，此时项目正常运行
第二步：参考这里antd的案例代码https://procomponents.ant.design/components/layout
找到这里的自定义menu案例，复制这里的代码，想要看看vite脚手架后面的效果

第三步：再次启动，这里出现了报错
[plugin:vite:css] '~antd/es/style/themes/index.less' wasn't found. Tried - D:\002Code\02myCodeResearch\my-react-first-app\node_modules@ant-design\pro-layout\es\components\PageContainer~antd\es\style\themes\index.less
第四步：对于这些报错，因为是找不到文件，vite相关，于是配置了两个插件
import NpmImport from 'less-plugin-npm-import';
import postcss from 'rollup-plugin-postcss';
但是还是不行，增加了官网babel中的import的配置还是不行，所有的vite配置和babel汇总如下，麻烦看看吧，谢谢（感觉像是vite的影响，但是不知道为什么）
vite完整配置
import { defineConfig } from 'vite';
// 支持vite的热更新
import NpmImport from 'less-plugin-npm-import';
import postcss from 'rollup-plugin-postcss';
import react from '@vitejs/plugin-react';
// 自动导入UI样式库
import vitePluginImp from 'vite-plugin-imp';
// import path from 'path';
// import fs from 'fs';
// import lessToJS from 'less-vars-to-js';

// const themeVariables = lessToJS(
// fs.readFileSync(
// path.resolve(__dirname, './src/assets/css/variables.less'),
// 'utf8',
// ),
// );

export default defineConfig({
server: {
host: true,
port: 8080,
},
plugins: [
react(),
vitePluginImp({
libList: [
{
libName: 'antd',
style: (name) => antd/lib/${name}/style/index.less,
},
],
}),
postcss({
use: [['less', {
plugins: [new NpmImport({prefix: '~'})],
}]],
}),
],
css: {
preprocessorOptions: {
// less预处理器
less: {
charset: false,
// 支持内联 JavaScript
javascriptEnabled: true,
// 重写 less 变量，定制样式
// modifyVars: themeVariables,
},
},
},
resolve: {
// alias: [
// {
// find: /@//,
// replacement: path.join(__dirname, './src/'),
// },
// ],
},
});
相关babel
{
"presets": ["env"],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // style: true 会加载 less 文件
}
]
]
}

🏞 期望结果

vite脚手架和react结合后，可以正常看到当前的菜单内容

💻 复现代码

采用案例，babel和vite的配置如下
相关babel
{
"presets": ["env"],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // style: true 会加载 less 文件
}
]
]
}
相关的vite配置
import { defineConfig } from 'vite';
import NpmImport from 'less-plugin-npm-import';
import postcss from 'rollup-plugin-postcss';
import react from '@vitejs/plugin-react';
// 自动导入UI样式库
import vitePluginImp from 'vite-plugin-imp';
// import path from 'path';
// import fs from 'fs';
// import lessToJS from 'less-vars-to-js';

// const themeVariables = lessToJS(
// fs.readFileSync(
// path.resolve(__dirname, './src/assets/css/variables.less'),
// 'utf8',
// ),
// );

export default defineConfig({
server: {
host: true,
port: 8080,
},
plugins: [
react(),
vitePluginImp({
libList: [
{
libName: 'antd',
style: (name) => antd/lib/${name}/style/index.less,
},
],
}),
postcss({
use: [['less', {
plugins: [new NpmImport({prefix: '~'})],
}]],
}),
],
css: {
preprocessorOptions: {
// less预处理器
less: {
charset: false,
// 支持内联 JavaScript
javascriptEnabled: true,
// 重写 less 变量，定制样式
// modifyVars: themeVariables,
},
},
},
resolve: {
// alias: [
// {
// find: /@//,
// replacement: path.join(__dirname, './src/'),
// },
// ],
},
});

© 版本信息

• ProComponents 版本: [e.g. 4.0.0]
  "@ant-design/pro-layout": "^6.34.4",
• umi 版本
  未安装
• 浏览器环境
  Microsoft Edge
  版本 99.0.1150.39 (正式版本) (64 位)
• 开发环境 [e.g. mac OS]
  window11+node14.7.0

🚑 其他信息

[nyhxiaoning]

找到原因了，是因为解析不了~，打扰了

[sineava]

解决了吗?我跟你遇到相同的问题

[chengdick]

怎么解决啊

[blackstoneblackstone]

先安装 less
npm i less -D

然后配置 vite.config.ts 重点是 css 和 alias 的配置

 css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  resolve: {
    alias: [
      {
        find: /^~/, 
        replacement: '',
      },
      {
        find: '@', 
        replacement: path.resolve(__dirname, './src')
      }
    ],
  }

[httol]

找到原因了，是因为解析不了~，打扰了

什么解析不了，遇到同样问题

[LYLSir]

找到原因了，是因为解析不了~，打扰了

最后是怎么解决的呢？

[perintery]

 css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  resolve: {
    alias: [
      {
        find: /^~/, 
        replacement: '',
      },
    ],
  }

就是上面的代码的方法解决的,
关注一下, 自己的antd 不能是v5版本~

@LYLSir

[perintery]

找到原因了，是因为解析不了~，打扰了

最后是怎么解决的呢？

 css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  resolve: {
    alias: [
      {
        find: /^~/, 
        replacement: '',
      },
    ],
  }

就是上面的代码的方法解决的,
关注一下, 自己的antd 不能是v5版本~

@LYLSir

[karlsbeard]

不能是v5版本，其他的都一样

[faga295]

好奇～是什么语法, 为啥需要这样引用