vue中自定义element

发布时间:2024-12-11 05:16

如何在Vue.js中使用Element UI进行组件开发 #生活技巧# #数码产品使用技巧# #设计软件使用技巧#

最新推荐文章于 2024-10-30 10:32:44 发布

只如初见0706 于 2020-03-10 14:17:36 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

前言:在项目中直接修改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文件配置代码如下

/* 改变主题色变量 */

$--color-primary: teal;

/* 改变 icon 字体路径变量,必需 */

$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';

@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>

网址:vue中自定义element https://www.yuejiaxmz.com/news/view/440720

相关内容

vue&Element
element ui 弹出组件的遮罩层在弹出层的上面的解决方法:modal
vue中css样式管理
vue
Selenium 自定义自动化测试报告整理
Vue配置marked链接添加target='
基于Springboot+Vue的二手交易平台
TypeScript在Vue中的应用
element
Nodejs+vue+Express校园二手图书网站

随便看看