构建前端第7篇之---elementUI设置主题,进而改变全局button底色
2024-10-19 17:29:13
张艳涛写于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中引入的,待解之谜
最新文章
- <;input>;和<;textarea>;
- centos ADSL 拨号上网设置
- poj 1141 Brackets Sequence (区间dp)
- BZOJ-1968 COMMON 约数研究 数论+奇怪的姿势
- HDU 5744 Keep On Movin (贪心) 2016杭电多校联合第二场
- sdutoj 2154 Shopping
- TestNG官方文档中文版(2)-annotation(转)
- windows下ipython的tab补全,只需安装pyreadline即可.
- [原博客] POJ 2975 Nim 统计必胜走法个数
- 部署war包到Tomcat
- sass安装步骤
- JavaScript(15)jQuery 选择器
- vue的一些坑(第二天)
- 初学者Web介绍一些前端开发中的基本概念用到的技术
- mongodb复制+分片集原理
- copy与mutableCopy的区别总结
- centos7安装redis设置开机启动
- 获取当前网页的绝对URL地址
- SOAP REST
- tf 数据读取
热门文章
- C++ folly库解读(三)Synchronized —— 比std::lock_guard/std::unique_lock更易用、功能更强大的同步机制
- redis为什么要提供pipeline功能
- 【NLP学习其一】什么是命名实体识别NER?
- Spring @Transaction 注解是如何执行事务的?
- .NET Worker Service 部署到 Linux 作为 Systemd Service 运行
- 【Azure 应用服务】Azure Function集成虚拟网络,设置被同在虚拟网络中的Storage Account触发,遇见Function无法触发的问题
- el-upload上传列表实现 展开 收起
- 限流神器Sentinel,不了解一下吗?
- 面试:MyBatis面试总结
- Quartz:Quartz添加事务回滚报错