直接编辑 element-variables.scss 文件,例如修改主题色为红色。 $--color-primary: red; 1. 编译主题 保存文件后,到命令行里执行 et 编译主题,如果你想启用 watch 模式,实时编译主题,增加 -w 参数;如果你在初始化时指定了自定义变量文件,则需要增加 -c 参数,并带上你的变量文件名。默认情况下编译的主题目录...
由自定义属性标记设定值,由var()函数来获取值。 /* 设定值 */:root{--background-color:#FF0000;}/* 获取值 */div{background-color:var(--background-color);} Element主题色 由Element官方文档我们可以它的整个组件库都是使用的CSS变量实现的。并且它提供了四种方式来修改样式变量,具体方式可以参考官方文档...
webpack构建时,在emit事件(准备写入dist结果文件时)中,将即将生成的所有css文件的内容中带有指定颜色的css规则单独提取出来,再合并为一个theme-colors.css输出文件。 然后在切换主题色时,下载这个文件,并替换为需要的颜色,应用到页面上。这样,下载的样式中就只包含颜色相关的css规则,文件较小;同时它已经包含了项目中...
先创建一个 element-variables.scss 的文件,内容如下: /* 改变主题色变量 */$--color-primary: teal;/* 改变 icon 字体路径变量,必需 */$--font-path:'~element-ui/lib/theme-chalk/fonts';@import"~element-ui/packages/theme-chalk/src/index"; 在项目的入口文件 main.js 中,直接引入以上样式文件即可...
vue+element-ui 更换自定义主题颜色 1.在elemetn官网 找到主题 配置自己的主题颜色 2.下载的样式解压后引入项目中 3.把刚刚解压的文件 放到我们项目里 4.在main.js里面去全局引入 5.这样全局就生效了 下面是效果对比
B端业务中有个需求,不同的客户需要有自己的主题色, element-ui 官网提供的换肤方式不适用与用户自定义切换颜色(别问我为什么不升级,你懂得!),用户能切换的是内置好的,因为客户很多,不可能内置这么多主题。所以决定采用css变量来实现。说干就干~ 1. 根据element-ui官网提供的方案(项目使用的是less,所以使用ele提供...
红框是需加入的代码 theme.scss文件存放到src/assets/css目录下 /* 改变主题色变量 */ $--color-primary: #cc0000; /* 改变 icon 字体路径变量,必需 */ $--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index"; ...
直接编辑element-variables.scss文件,例如修改主题色为红色。 $--color-primary: red; 4. 编译主题 保存文件后,到命令行里执行et编译主题,如果你想启用watch模式,实时编译主题,增加-w参数;如果你在初始化时指定了自定义变量文件,则需要增加-c参数,并带上你的变量文件名 ...
5. 在自定义主题文件中修改颜色变量：scss $--color-primary:#409eff;$--color-success:#67c23a;$...