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️⃣

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';

终于正常啦!

相关推荐
2401_882726481 小时前
BY组态-低代码web可视化组件
前端·物联网·低代码·前端框架·web
万维——组态1 小时前
BY组态-低代码web可视化组件
前端·物联网·低代码·编辑器·流程图·组态
小黄编程快乐屋1 小时前
npm操作大全:从入门到精通
前端·npm·node.js
OpenTiny社区1 小时前
TinyEngine v2.1版本发布:全新的区块方案和画布通信方案,打造更强力的可拓展低代码引擎
前端·低代码·开源·opentiny
用户380235599002 小时前
[快速入门:利用LangChain与百度千帆平台进行对话模型集成]
前端
黑客老陈3 小时前
基于 Electron 应用的安全测试基础 — 提取和分析 .asar 文件
运维·服务器·前端·javascript·网络·electron·xss
yqcoder3 小时前
electron 获取本机 ip 地址
前端·javascript·electron
唐某霖4 小时前
el-dialog弹窗的@open方法中,第一次引用ref发现undefined问题,第二次后面又正常了
前端·javascript·vue.js
cdcdhj4 小时前
nodejs后端ws与http结合共享一个服务器,前端websocket发送信息后端ws接收信息,使用Map定型数组设置ID
服务器·前端·http
珹洺4 小时前
音乐播放器实现:前端HTML,CSS,JavaScript综合大项目
开发语言·前端·javascript·css·gitee·bootstrap·html