我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
element ui 自定义主题按需导入样式 yarn
最近发现了element主题的一个知识点,应该可以方便大家。
前提
项目里的组件都是按需导入,然后要求使用自定义主题,但是设计师只给了一个官方在线主题生成工具生成的主题zip包。
这个主题压缩包打开发现只有一个index.css,一个font文件夹,一个config.json文件。
css文件大概会有200kb以上。
而我们的按需引入是引入一个组件,就会引入对应的样式文件,他不会一口气引入所有的样式,但是如果要使用自定义主题,index.css又不得不引入,导致按需引入达不到理想状态。
我们现在就要解决这个css的问题。
思路
打开config.json文件,你可以看到一些键值对,仔细看一下,你可以发现这些就是设计师给你设置的颜色,每个key对应了一个scss变量名。
而饿了么框架他的颜色,就是根据这些颜色变量名进行衍生的,比如:在这个颜色的基础上,颜色加深,颜色变浅
那么我们知道了设计师操作了哪些颜色,我们的开展空间就大了。
已知条件
- 我们需要每个组件对应的css样式文件
- 我们知道操作的颜色是哪些
未知条件
- 怎么生成对应组件的css样式文件
- 怎么自动按需导入样式文件
教程
1. 怎么生成对应组件的css样式文件
element提供了一个编译主题的插件,而这个插件可以单独开一个项目使用,或者直接在项目里使用,我使用的是后者,因为方便管理。
// 安装主题生成工具
yarn add element-theme --dev
//安装chalk主题
yarn add element-theme-chalk --dev
安装完毕后我们输入命令生成一个主题的scss颜色配置文件
node_modules/.bin/et -i
这个时候他会在项目的根目录生成一个element-variables.scss
颜色配置scss。
报错了
如果提示: primordials is not defined
那说明你的node版本过高了,你需要将node版本更换为v11.15.0
你可以使用nvm插件进行版本更换,具体可以浏览本人的这篇文章:nvm 使用
修改颜色
打开element-variables.scss
文件,我们就可以通过config.json文件里面的key值去找到对应的颜色变量,然后将config.json对应的颜色值替换element-variables.scss
里面的即可。
替换完后保存。
生成主题css
et
输入et就能进行生成,如果你对scss有所了解,应该知道scss是可以watch监听的,也就是动态生成css,你保存一次scss,他生成一次新的css文件,所以,如果你想这样的话,需要在命令后面加上-w
//动态监听
et -w
如果你觉得element-variables.scss
的名字太长了,你想自定义一个文件名,也是可以的,你自定义完毕文件名后,你在et
后面加上-c 新文件名
即可,(暂未测试)
参考官方编译主题 et -i [可以自定义变量文件]
生成完毕后,你会发现在项目的根目录生成了一个theme文件夹,里面有很多css,这个就是生成的对应的组件css了
指定生成到某路径
默认情况下编译的主题目录是放在 ./theme
下,你可以通过 -o
参数指定打包目录。
et -o ./src/assets
2. 怎么自动按需导入样式文件
如果你之前已经设置好了动态导入组件,你可以的babel.config.js
文件应该是这样的内容
module.exports = {
"presets": [
"@vue/cli-plugin-babel/preset"
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
我们只需要改动styleLibraryName
module.exports = {
"presets": [
"@vue/cli-plugin-babel/preset"
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "~theme"
}
]
]
}
~theme
表示的是相对于babel.config.js
文件的路径,theme就是根目录下的theme文件夹。
注意~
是必须的,后面的路径你可以根据theme的路径调整,你可以放到assets目录下,这些都是允许的。
然后重启项目,你会发现,你的样式是按需引入的,并且还是自定义主题。
评论(2)

银联POS机
木灵鱼儿