element-ui生成自定义主题

前言：element采用的是scss预编译语言，这里生成主题的方法是官方提供的命令行工具，通过修改scss文件的变量文件，然后重新编译成css样式文件，项目引入我们编译过的样式文件，因为比较简单，下面直接开始步骤：

1、下载命令行工具（最好最为项目依赖）

npm i element-theme -D

2、下载样式模板

npm i element-theme-chalk -D
//或者
npm i https://github.com/ElementUI/theme-chalk -D

3、生成变量文件

et -i

执行上面的命令会在项目根目录生成element-variables.scss文件

可以手动指定文件名和位置

et -i src/styles/vars.scss

4、根据实际需要，修改变量文件里的变量来改变主题

//例如修改主题颜色为黄色
$--color-primary: yellow;

5、生成样式文件

et

执行上面的命令会默认找项目根目录下的element-variables.scss文件，并在项目根目录下生成theme文件夹，里面为生成的样式文件。

如果手动指定了变量文件，则需要使用-c来指定，-o可以指定输出样式文件的目录

et -c src/styles/vars.scss -o src/styles/theme

6、使用

全局使用，在main.js直接引入生成的样式文件

import '../theme/index.css'

按需使用：配合babel-plugin-component插件一起使用，指定styleLibraryName的值为生成的样式文件的相对路径，相对于.babelrc文件的路径，需要加上~。

{"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "~theme"}]]
}

element-ui生成自定义主题相关推荐

element ui——Pagination 自定义分页样式
我们可以看到,element ui Pagination分页默认样式直接显示首页 - 中间页 - 末页,但当项目中数据量过大时,用户直接点击最后一页可能会导致后端elk崩溃.项目最后要求不能把 ...
element ui实现自定义上传文件-以及解决已上传文件列表消失问题
自定义上传按钮,非自动上传,效果图 action - 就是上传的接口地址 accept - 是限制上传文件格式,设置后只能上传该格式文件, 选取-选取按钮只是选择了文件 ,但是并没有上传若要点击上传 ...
element ui Form 自定义校验规则,验证手机号
网站快速成型工具 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库指南了解设计指南,帮助产品设计人员搭建逻辑清晰.结构合理且高效易用的产品. 查看详情组件 ...
Element ui 前端自定义分页/批量选中/批量删除/单个删除/element-ui(复选框)type=“selection“置灰
直接看代码 <template><div class="page-content"><div class="page-header" ...
Element UI 自定义动态换肤（主题）
需求背景:项目需要支持动态换主题,主题色可以随意选择(即用户想用什么颜色的主题就用什么颜色的主题):而element官网给的自定义主题只能是项目里写死,无法实现用户动态切换: 方式一:调接口加载C ...
elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色
点击右上方红色按钮关注"web秀",让你真正秀起来前言经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题.那么,我们怎么把这个功能用到 ...
Element UI（一）
目录一.指南设计原则导航选择合适的导航侧栏导航顶部导航二.开发指南安装 npm 安装 CDN Hello world 快速上手 ¶使用 vue-cli@3 ¶使用 Starter Ki ...
element ui 引入css,element-ui引入方式、自定义主题
1. element-ui组件引入方式: 1)完整引入在 main.js 中写入以下内容: import Vue from 'vue'; import ElementUI from 'element ...
element ui需要引入样式吗_彻底学会element-ui按需引入和纯净主题定制
原标题:彻底学会element-ui按需引入和纯净主题定制作者:wuwhs 来源:SegmentFault 思否社区前言手上有些项目用的element-ui,刚好有空琢磨一下怎么减小打包文件大小 ...

element-ui生成自定义主题

element-ui生成自定义主题相关推荐

最新文章

热门文章