1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > element-ui生成自定义主题

element-ui生成自定义主题

时间:2018-10-11 22:23:09

相关推荐

element-ui生成自定义主题

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

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

npm i element-theme -D

2、下载样式模板

npm i element-theme-chalk -D//或者npm i /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"}]]}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。