以vant框架为例,vue项目以less作为css处理器:

less/var-reset.less

@import '~vant/lib/index.less';

// Color variables 重写变量值
@blue: #1989fa;
@orange: #000;
@green: #cccccc;

vue入口文件:

import vant from 'vant';
import '../../less/var-reset.less'; // 引入var-reaet.less文件
Vue.use(vant);

vue文件:

Hello admin
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

结果:

aaarticlea/png;base64,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" alt="" />

vue 修改框架less变量的更多相关文章

  1. vue修改框架样式/deep/

    /deep/ 父元素的样式名 /deep/ 要修改的样式名 使用 ... 貌似不行

  2. upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量

    upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量 <Upload ...

  3. 后盾网lavarel视频项目---4、lavarel和vue都是{{}}表示变量,如何解决冲突

    后盾网lavarel视频项目---4.lavarel和vue都是{{}}表示变量,如何解决冲突 一.总结 一句话总结: @{{videos}}:@符号表示lavarel不处理:textarea nam ...

  4. vue 前端框架 目录

    vue 前端框架 目录   vue-目录 ES6基础语法 vue基础语法 Vue.js的组件化思想 —上 Vue.js的组件化思想 —下 Vue + Vue-Router结合开发 SublimeSer ...

  5. Vue项目框架

    Vue项目框架 基本组件的使用: new Vue({ el, //要绑定的DOM element data, //要绑定的资料 props, //可用来接收父原件资料的属性 template, //要 ...

  6. 使用Vue+JFinal框架搭建前后端分离系统

    前后端分离作为Web开发的一种方式,现在应用越来越广泛.前端一般比较流行Vue.js框架,后端框架比较多,网上有很多Vue+SpringMVC前后端分离的demo,但是Vue+JFinal框架貌似没有 ...

  7. 直播课(1)如何通过数据劫持实现Vue(mvvm)框架

    19.6.28更新: 这篇博客比较完善:将每一部分都分装在单独的js文件中: 剖析Vue原理&实现双向绑定MVVM 半个月前看的直播课,现在才自己敲了一遍,罪过罪过 预览: 思路: 简单实现V ...

  8. vue修改elementUI的分页组件视图没更新问题

    转: vue修改elementUI的分页组件视图没更新问题 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页.今天想在methods里面手 ...

  9. 怎样修改Windows7环境变量

    在使用电脑的时候要运行某些特定的应用程序时需要修改系统的环境变量,例如安装JAVA时我们就需要配置系统的环境变量.那什么是环境变量呢?环境变量一般是指在操作系统中用来指定操作系统运行环境的一些参数,比 ...

随机推荐

  1. 4、Angular2 pipe

    1. stateless pipe 2.stateful pipe

  2. Java笔记之Scanner先读取一个数字,在读取一行字符串方法分析

    问题:大家在学习Java读取数据的时候一般都是使用Scanner方法读取数据,但是其中有一个小问题大家可能不知道, 就是我们在使用scanner的时候如果你先读取一个数字,在读取一行带有空格的字符串, ...

  3. 数据分析核心包——pandas

    一.pandas简介 pandas是一个强大的Python数据分析的工具包,是基于NumPy构建的. 1.pandas的主要功能 (1)具备对其功能的数据结构DataFrame.Series (2)集 ...

  4. scss-#{}插值

    一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下则必须要以 #{$variables} 形式使用. 例如:scss代码 $borderDirection: top !d ...

  5. python数据分析工具安装集合

    用python做数据分析离不开几个好的轮子(或称为科学棧/第三方包等),比如matplotlib,numpy, scipy, pandas, scikit-learn, gensim等,这些包的功能强 ...

  6. 浅谈SQL Server中的事务日志(五)----日志在高可用和灾难恢复中的作用

    简介 日志的作用是保证持久性和数据一致性,通过日志可以实现数据的Undo与Redo,因此通过日志,SQL Server不仅仅可以实现灾难恢复,还可以通过日志的Redo来实现高可用性.本篇文章主要讲述日 ...

  7. elasticsearch5.5.2环境搭建

    运行elasticsearch5.5.2需要jdk1.8版本以上 1.elasticsearch可以去官网或github下载,window系统推荐zip压缩版 2.解压后 进入bin目录运行elast ...

  8. java生成实体类的工具内部是如何实现的(mysql)

    一.认识INFORMATION_SCHEMA数据库 INFORMATION_SCHEMA数据库提供了访问数据库元数据(数据的数据)的方式 该数据库中存放有数据库名.表名,列名.列的数据类型等各种数据 ...

  9. redis复制集(sentinel)

    https://www.jianshu.com/p/45ffd2a84143 内核配置 cat >> /etc/rc.local << EOF echo never > ...

  10. 服务器ipmi远程管理

    DELL iDRAC (Integrated Dell™ Remote Access Controller )是 Dell PowerEdge 系列服务器上的远程管理方案, 11代 12代服务器已经集 ...