首先是结论:
"less": "^2.7.3",
"less-loader": "^4.1.0",
vite.config.js
javascript
resolve: {
alias: {
// 设置路径
'~': path.resolve(__dirname, './'),
// 设置别名
'@': path.resolve(__dirname, './src')
},
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
'~': path.resolve(__dirname, './'),
自定义文件 \src\assets\scss\view-design.less
javascript
@import '~/node_modules/view-ui-plus/src/styles/index.less';
// Here are the variables to cover, such as:
@primary-color: #0066FE;
@link-hover-color:#4C94FF;
@text-color: #303133;
@import '~/node_modules/view-ui-plus/src/styles/index.less';
如果没代理 ~ 就是./
@import './node_modules/view-ui-plus/src/styles/index.less';
main.js 中引入
javascript
import './assets/scss/view-design.less'
分享解决过程
如果按照官网的会报错
@import '~view-ui-plus/src/styles/index.less';
vite\] Internal server error: \[less\] '\~view-ui-plus/src/styles/index.less' wasn't found. Tried 暂时没找到什么原因,网上百度的方法全试了,包括以下全没用 1️⃣ 改less版本 2️⃣  3️⃣ ```javascript css: { preprocessorOptions: { less: { modifyVars: { hack: 'true; @import "@/assets/less.less"' }, javascriptEnabled: true } } } ``` 最后我终于找到一篇文章让把 @import '\~iview/src/styles/index.less'; 改为 @import '\~view-design/dist/styles/iview.css'; 这个改了也没用,但是给我启发了,我改成 @import '\~/node_modules/view-ui-plus/src/styles/index.less'; 终于正常啦!