码迷,mamicode.com
首页 > 其他好文 > 详细

element 如何自定义主题

时间:2018-04-07 16:07:57      阅读:2231      评论:0      收藏:0      [点我收藏+]

标签:直接   blog   调用   build   code   增加   自定义变量   现在   scss   

自定义主题 在我学习element的时候,就直接忽略了。现在返回来学习一下 ,原来 通过自定义主题可以改变elemnt中默认的一些样式。这样,对于一些不想用elment自带但是用到比较多的样式,可以进行修改。

看了很多关于自定义主题的文章,其实都是 差不多的, 我想自己写一遍,加深一下印象,也希望能给别人带来帮助。

这篇博客的思路,总结性比较强,指的大家j借鉴:https://blog.csdn.net/young_emily/article/details/78591261

改变原有的elementui主题: 
安装elementui的自定义主题工具,然后初始化变量文件,得到elementui的scss文件,我们修改颜色就修改他的scss文件,然后编译scss文件得到css文件,我们引用修改好了的css文件[实现覆盖elementui的css文件]即可实现换肤。

我下面写的这种方法;是项目中没有使用scss,可以通过命令行主题工具进行深层次的主题机制

 

步骤:

1》安装主题生成工具,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动,这里以全局安装做演示。:

npm i element-theme -g

2》安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码。

# 从 npm

npm i element-theme-chalk -D

# 从 GitHub

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

在这里 我是使用的第一种方法,直接通过npm安装的。

3》初始化变量文件  这一步 我自己在写的实现的时候 总是找不到文件,我觉得这一步需要注意一下,后来不知道怎么回事,就好了

主题生成工具安装成功后,如果全局安装可以在命令行里通过 et 调用工具,如果安装在当前目录下,需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss,当然你可以传参数指定文件输出目录。

 

et -i [可以自定义变量文件]

> ? Generator variables file 出现这一标志,表示着初始化变量文件成功。

 

如果使用默认配置,执行后当前目录会有一个 element-variables.scss 文件。内部包含了主题所用到的所有变量,它们使用 SCSS 的格式定义。大致结构如下:

这个文件就自动生成到根目录下,可以看下图:

技术分享图片

 修改变量

 

直接编辑 element-variables.scss 文件,例如修改主题色为红色。

$--color-primary: red;

编译主题

保存文件后,到命令行里执行 et 编译主题,如果你想启用 watch 模式,实时编译主题,增加 -w 参数;如果你在初始化时指定了自定义变量文件,则需要增加 -c 参数,并带上你的变量文件名(每次改完变量后,都需要编译后 才会在页面中更改)

  1. et
  2. > ? build theme font
  3. > ? build element theme

 引入自定义主题(即让你修改的变量 得以应用)

 默认情况下编译的主题目录是放在 ./theme 下,你可以通过 -o 参数指定打包目录。像引入默认主题一样,在代码里直接引用 theme/index.css 文件即可。

import ‘../theme/index.css‘

import ElementUI from ‘element-ui‘

import Vue from ‘vue‘

Vue.use(ElementUI)

这是目前我用到的自定义主题,还有其他种方法,以后会慢慢补充的,希望大家多多支持。

element 如何自定义主题

标签:直接   blog   调用   build   code   增加   自定义变量   现在   scss   

原文地址:https://www.cnblogs.com/mn6364/p/8733359.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!