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

首先是结论: 

"less": "^2.7.3",

 "less-loader": "^4.1.0",

vite.config.js

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

@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 中引入

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

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

终于正常啦!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/61761.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringMVC接收数据

一、访问路径设置: RequestMapping注解的作用就是将请求的URL地址和处理请求的方式(handler方法)关联起来,建立映射关系;SpringMVC接收到指定的请求,就会来找到在映射关系中对应的方法来处理这个请求 1.精准路径匹配: 在RequestMapping注解指定URL地址…

【微服务】Docker

一、Docker基础 1、依赖的兼容问题:Docker允许开发中将应用、依赖、函数库、配置一起打包,形成可移植镜像Docker应用运行在容器中,使用沙箱机制,相互隔离。 2、如何解决开发、测试、生产环境有差异的问题:Docker镜像…

【自用】管材流转项目前端重部署流程 vue2 webpackage4 vuecli4

一、配置 1.下载项目,使用 IDEA 打开,并配置 Nodejs 它提示我,需要 Node.js,因为 nodejs 14 的 installer 已经官网已经找不到了,使用 fnm 又太麻烦, 所以直接采用在 IDEA 中下载的方式就好了。 2.清除缓…

工程设计行业内外网文件交换解决方案:FileLink助力高效、安全的跨网协作

在工程设计行业,文件交换和信息共享是项目顺利推进的关键。尤其是涉及复杂的设计图纸、技术方案、合同文件等重要资料时,如何确保文件在内外网之间的高效、安全传输,直接影响到项目的进度和质量。FileLink正是为此而生,它为工程设…

鸿蒙多线程开发——Sendable使用注意事项

1、概 述 本文是在鸿蒙多线程开发——线程间数据通信对象03(sendable)基础上做的扩展讨论。 Sendable协议定义了ArkTS的可共享对象体系及其规格约束。符合Sendable协议的数据(以下简称Sendable对象)可以在ArkTS并发实例间传递。 默认情况下&#xff0…

1074 Reversing Linked List (25)

Given a constant K and a singly linked list L, you are supposed to reverse the links of every K elements on L. For example, given L being 1→2→3→4→5→6, if K3, then you must output 3→2→1→6→5→4; if K4, you must output 4→3→2→1→5→6. Input Specif…

Wwise SoundBanks内存优化

1.更换音频格式为Vorbis 2.停用多余的音频,如Random Container的随机脚步声数量降为2个 3.背景音乐勾选“Stream”。这样就让音频从硬盘流送到Wwise,而不是保存在内存当中,也就节省了内存 4.设置最大发声数Max Voice Instances 5.设置音频…

产品转后端?2

产品经理的视角能让你成为更好的后端工程师: 理解业务需求转换为技术方案的过程知道为什么要这样设计API明白数据结构的选择如何影响用户体验了解性能指标对业务的实际影响 在实习过程中可以有意识地向后端倾斜: 常规产品经理工作: "…

C 语言 “神秘魔杖”—— 指针初相识,解锁编程魔法大门(一)

文章目录 一、概念1、取地址操作符(&)2、解引用操作符(*)3、指针变量1、 声明和初始化2、 用途 二、内存和地址三、指针变量类型的意义1、 指针变量类型的基本含义2、 举例说明不同类型指针变量的意义 四、const修饰指针1、co…

Android 使用OpenGLES + MediaPlayer 获取视频截图

概述 Android 获取视频缩略图的方法通常有: ContentResolver: 使用系统数据库MediaMetadataRetriever: 这个是android提供的类,用来获取本地和网络media相关文件的信息ThumbnailUtils: 是在android2.2(api8)之后新增的一个,该类为…

博泽Brose EDI项目案例

Brose 是一家德国的全球性汽车零部件供应商,主要为全球汽车制造商提供机电一体化系统和组件,涵盖车门、座椅调节系统、空调系统以及电动驱动装置等。Brose 以其高质量的创新产品闻名,在全球拥有多个研发和生产基地,是全球第五大家…

python使用python-docx处理word

文章目录 一、python-docx简介二、基本使用1、新建与保存word2、写入Word(1)打开文档(2)添加标题(3)添加段落(4)添加文字块(5)添加图片(6&#xf…

aws(学习笔记第十五课) 如何从灾难中恢复(recover)

aws(学习笔记第十五课) 如何从灾难中恢复 学习内容: 使用CloudWatch对服务器进行监视与恢复区域(region),可用区(available zone)和子网(subnet)使用自动扩展(AutoScalingGroup) 1. 使用CloudWatch对服务器进行监视与恢复 整体架构 这里模拟Jenkins Se…

lwip raw、netcoon、socket三种接口编程的区别

目录 一、前言 二、LWIP 简介 三、LWIP RAW 编程 1.概念与原理 2.编程模型与流程 3.示例代码 4.优点与缺点 四、LWIP NETCONN 编程 1.概念与原理 2.编程模型与流程 3.示例代码 4.优点与缺点 五、LWIP SOCKET 编程 1.概念与原理 2.编程模型与流程 3.示例代码 …

软件设计 —— 检测按键单击、多击、长按或组合动作

目 录 按键单一动作识别按键组合动作识别 按键单一动作识别 带有按键的作品设计时,按键动作检测是必不可少的,如何判断按键是单击、双击、三击和长按动作呢? 1、定时器定时一个10ms周期 2、把按键检测函数放到这个周期内执行,即…

MySQL MVCC 介绍

MVCC(Multi-Version Concurrency Control)是一种并发控制机制,用于在多个并发事务同时读写数据库时保持数据的一致性和隔离性。MVCC通过在每个数据行上维护多个版本的数据来实现。当一个事务要对数据库中的数据进行修改时,MVCC不会…

【XGlassTerminal.js】快速 构建 炫酷 终端 网页 以及 Linux 模拟器 在线!!

XGlassTerminal.js XGlassTerminal.js 是一个用于构建前端终端样式的 JavaScript 库。它允许开发者轻松地创建一个具有终端风格的用户界面,并对用户输入的命令进行事件处理。 该库提供了丰富的功能,包括文本添加、命令处理、点击事件绑定等。 同时还支…

车辆传动系统的simulink建模与仿真,分析加速和刹车两个工况

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 车辆传动系统的simulink建模与仿真,分析加速和刹车两个工况。模型包括车辆模块,传动模块,发动机模块,换挡模块,刹车油门输入模块…

MySQL如何区分幻读和不可重复读

在MySQL中,幻读和不可重复读都是并发事务中可能出现的问题,但它们的表现和原因略有不同。 不可重复读 (Non-Repeatable Read) 不可重复读是指在同一个事务内,多次读取同一行数据时,可能会得到不同的结果。这种情况发生在一个事务…

宝塔配置定时任务详解

文章目录 宝塔配置定时任务详解一、引言二、配置定时任务1、登录宝塔面板2、添加定时任务2.1、步骤 3、配置任务3.1、设置任务名称和执行周期3.2、设置执行命令 4、保存并测试 三、使用示例1、备份数据库2、清理日志文件 四、总结 宝塔配置定时任务详解 一、引言 在服务器管理…