构建前端第7篇之---elementUI设置主题,进而改变全局button底色
张艳涛写于2020-1-20
What:是elementUI主题?
是内置的格式,elementUI默认只有一个主题,如果想整体替换按钮的颜色等问题,那么就可以用主题
设置步骤
在路径src/styles/element-variables.scss新建文件
内容为
/**
* I think element-ui's default theme color is too light for long-term use.
* So I modified the default color and you can modify it to your liking.
**/ /* theme color */
$--color-primary: #ff4949;
$--color-success: #13ce66;
$--color-warning: #FFBA00;
$--color-danger: #ff4949;
// $--color-info: #1E1E1E; $--button-font-weight: 400; // $--color-text-regular: #1f2d3d; $--border-color-light: #dfe4ed;
$--border-color-lighter: #e6ebf5; $--table-border:1px solid#dfe6ec; /* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index"; // the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
//最后一行代码作用为止,以后再研究,目前看不懂
:export {
theme: $--color-primary;
}
然后再根目录下的main.js引入import 这个文件
import './styles/element-variables.scss'
就能实现了,现在遇到的问题是工作的实际工程并没有在main.js引入,而是在setting.js中引入的,待解之谜
构建前端第7篇之---elementUI设置主题,进而改变全局button底色的更多相关文章
- 构建前端第12篇之---在Vue中对组件,变量,函数的全局引入
张燕涛写于2020-01-16 星期two 本篇还是源于import和export的使用,昨天看es6入门 和MDN文档,大体上用法了解了,但今天看ElementUI源码的时候,看到 //src/in ...
- 构建前端第6篇之---内嵌css样式 <el-button style="width:100%"> 登录 </el-button>
张艳涛写于2021-1-20日 What: 如何让button的长度和input长度一致呢 最先想到的是给这个button加一个class ="buttonclass",然后在vu ...
- 构建前端第5篇之---修改css样式的思路
张艳涛写于2020-1-20 在页面元素布局的时候,在知道应该如何设置元素的属性的时候,可以依照如下思路,使用chrome浏览器,打开f12,找到对应的最近元素,看右侧对于的css样式窗口,调整修改数 ...
- 构建前端第4篇之---使用css用法 height
张艳涛 写于2021-1-20 height: 100%; What: html的元素标签,例如 <html>,<body>,<div>都有height的css属 ...
- 构建前端第3篇之---使用scss
张艳涛 写于2021-1-20 主要解决俩个问题: 在单个vue文件中 <style rel="stylesheet/scss" lang="scss"& ...
- 构建前端第2篇之--ESLint 配置
张艳涛 写于2021-1-19 报错: http://eslint.org/docs/rules/space-before-function-paren Missing space before fu ...
- 构建前端第13篇之---VUE的method:{}的括号未括到方法导致 _vm.linkProps is not a function
- 构建前端第10篇之---Function.prototype.call()
张艳涛写于2020-01-25,参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ ...
- 构建前端第9篇之(下)---vue3.0将template转化为render的过程
vue3.0将template转化为render的过程 这里是简单标记下,如何将.vue转换成js文件 具体的,先不研究了,太深,能力有限,达不到呢
随机推荐
- Django基础之cookie与session
cookie与session 由来及简介 HTTP协议四大特性 1.基于请求响应 2.基于TCP.IP作用于应用层之上 3.无连接 4.无状态 基于HTTP协议的通信无法记录客户端状态 但是现在很多软 ...
- spring赌上未来的一击:WebFlux性能实测
最近花了一点时间系统的测试验证了在SpringBoot框架下使用SpringMVC和Spring WebFlux两种框架开发接口,对比了响应时间以及压测吞吐量的区别. WebFlux&Spri ...
- 【题解】入阵曲 luogu3941 前缀和 压维
丹青千秋酿,一醉解愁肠. 无悔少年枉,只愿壮志狂 题目 题目描述 小 F 很喜欢数学,但是到了高中以后数学总是考不好. 有一天,他在数学课上发起了呆:他想起了过去的一年.一年前,当他初识算法竞赛的 时 ...
- WEB安全漏洞扫描与处理(下)——安全报告分析和漏洞处理
1 AppScan生成的安全报告分析 利用AppScan生成安全报告,可以提前对要生成的安全报告的内容进行选择,如下图,最全的安全报告内容,包括摘要,安全性问题,咨询和修订建议,应用程序数据等. 生成 ...
- leetcode动态规划题目总结
Hello everyone, I am a Chinese noob programmer. I have practiced questions on leetcode.com for 2 yea ...
- 『心善渊』Selenium3.0基础 — 13、Selenium操作下拉菜单
目录 1.使用Selenium中的Select类来处理下拉菜单(推荐) 2.下拉菜单对象的其他操作(了解) 3.通过元素二次定位方式操作下拉菜单(重点) (1)了解元素二次定位 (2)示例: 页面中的 ...
- 二、JavaSE语言基础之常量与变量
1.常量 所谓常量值的是数据处理过程中值不能更改的数据. 2.变量 所谓变量值的是运算过程中值可以改变的数据,类似于代数中的未知数. 在Java语言中,使用变量时必须遵循先定义,而后赋值, ...
- 【转载】Nginx多服务绑定80端口及映射域名
多服务绑定80端口及映射域名 说明:业务需要配置的样例模板,如需深入了解,请查看官方文档 1.Nginx配置文件nginx.conf(可拆分多台机器部署) worker_processes 1; e ...
- PHP常见的设计模式
设计模式六大原则 开放封闭原则:一个软件实体如类.模块和函数应该对扩展开放,对修改关闭. 里氏替换原则:所有引用基类的地方必须能透明地使用其子类的对象. 依赖倒置原则:高层模块不应该依赖低层模块,二者 ...
- php+swoole多线程的操作
多个任务同时执行 比如,我们要对已知的用户数据进行判断,是否需要发送邮件和短信,如果需要发送则发送. 不使用多进程时,我们首先判断是否发送邮件,如果需要则发送:然后再判断是否需要发送短信,如果需要则发 ...