vite+vue3全局定义less变量在单文件中使用方式
更新时间：2024年03月21日 09:23:23 作者：V_AYA_V
这篇文章主要介绍了vite+vue3全局定义less变量在单文件中使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vite+vue3全局定义less变量在单文件使用
最近在探究使用vite+vue3搭建一个后台框架，为了更好的扩展性，将系统可能用到的所有颜色以及部分属性定义变量作为单独的less文件。
在全局的index.less中定义之后，在其它文件使用直接报错，提示@primary-color为undefined
解决方案
在vite配置文件css中加上modifyVars。
重启项目就ok了
// vite.config.js
...
css: {
preprocessorOptions: {
less: {
modifyVars: {
hack: `true; @import (reference) "${path.resolve('src/styles/color.less')}";`,
},
javascriptEnabled: true
}
}
},
...
附上color.less，嫖的antd-design-vue
@primary-color: #1890ff; // 全局主色 @link-color: #1890ff; // 链接色 @success-color: #52c41a; // 成功色 @warning-color: #faad14; // 警告色 @error-color: #f5222d; // 错误色 @font-size-base: 14px; // 主字号 @heading-color: rgba(0, 0, 0, 0.85); // 标题色 @text-color: rgba(0, 0, 0, 0.65); // 主文本色 @text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色 @disabled-color: rgba(0, 0, 0, 0.25); // 失效色 @border-radius-base: 4px; // 组件/浮层圆角 @border-color-base: #d9d9d9; // 边框色 @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue中使用vue-plugin-hiprint插件进行打印的功能实现
hiprint 是一个web 打印的js组件,无需安装软件,支持windows,macOS,linux 系统,支持移动端,PC端浏览器,angular,vue,react 等 分页预览,打印,操作简单,运行快速,本文介绍了Vue中使用vue-plugin-hiprint插件进行打印,需要的朋友可以参考下2025-04-04
这篇文章主要为大家介绍了Vue实现带参数的自定义指令示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
vue使用JSON编辑器:vue-json-editor详解
文章介绍了如何在Vue项目中使用JSON编辑器插件`vue-json-editor`,包括安装、引入、注册和使用示例,通过这些步骤,用户可以在Vue应用中轻松实现JSON数据的编辑功能,文章最后呼吁大家支持脚本之家2025-01-01
使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程,下面这篇文章主要给大家介绍了关于前端Vue项目部署到服务器的全过程以及踩坑记录的相关资料,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了Vue2.0 UI框架ElementUI的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
为了防止用户在网络不好或者其他情况下短时间内重复进行接口请求，重复发送多次请求，本文主要介绍了Vue中Axios中取消请求及阻止重复请求的方法，感兴趣的可以了解一下2022-02-02
这篇文章主要介绍了如何定义地图容器及操作按钮,使用高德地图API进行轨迹绘制及播放的方法,并强调了界面样式的重要性,高德地图API的使用需要注册获取key,并且设置了地图容器的大小,需要的朋友可以参考下2024-11-11
上一篇文章我们介绍了利用Vue3 创建Vue CLI 项目（一），接下来就来看看Vue3集成Ant Design Vue 的相关资料，需要的小伙伴可以参考一下文章的具体内容2021-10-10
这篇文章主要介绍了vue项目自动设置请求状态的配置方法,本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
在实际业务中，我们常用图表来做数据统计，数据展示，数据可视化等比较直观的方式来达到一目了然的数据查看，但在大屏开发过程中，常会因为适配不同屏幕而感到困扰，下面我们来解决一下这个不算难题的难题2022-11-11
最新评论