当前位置:   article > 正文

vue中自定义element-ui组件库的主题颜色_type="primary

type="primary

前言:在项目中直接修改element的样式变量,前提是需要使用scss编写,这就需要首先在项目中安装可以解析scss文件格式的插件

1、第一步:安装解析scss文件格式的插件sass-loader,node-sass

npm install sass-loader node-sass -dev

2、第二步:在src下新建theme文件,并在文件下新建element-variables.scss文件,element-variables.scss文件配置代码如下

  1. /* 改变主题色变量 */
  2. $--color-primary: teal;
  3. /* 改变 icon 字体路径变量,必需 */
  4. $--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
  5. @import "../node_modules/element-ui/packages/theme-chalk/src/index";

3、在main.js中引入配置好的自定义主题文件

import './theme/element-variables.scss'

4、正常使用组件就可以了,如下type=“”primary“的按钮颜色便成了上面设置好的颜色,同样如果也需要修改success等类型的颜色,按照上面的方式修改即可

 <el-button type="primary">主要按钮</el-button>

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/267804
推荐阅读