vue3+view-ui-plus+vite+less 实现自定义iview样式

首先是结论:

"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️⃣ ![](https://i-blog.csdnimg.cn/direct/dbe8c60875ec4c2ba3f64a8999cc9d48.png) 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'; 终于正常啦!

相关推荐
fruge15 分钟前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
知识分享小能手4 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
lijun_xiao20097 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
Larry_Yanan7 小时前
QML学习笔记(四十二)QML的MessageDialog
c++·笔记·qt·学习·ui
90后的晨仔8 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼8 小时前
JavaWeb_p165部门管理
java·开发语言·前端
90后的晨仔8 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔8 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀8 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
Javashop_jjj8 小时前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app