木灵鱼儿
阅读：3572
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/assets2. 怎么自动按需导入样式文件
如果你之前已经设置好了动态导入组件，你可以的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目录下，这些都是允许的。
然后重启项目，你会发现，你的样式是按需引入的，并且还是自定义主题。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。
相关推荐
实现一个点击空白区域关闭显示的自定义指令
typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...
使用vue2.7的一些踩坑事项
eslint校验的一些问题（暂时无解）在初始化项目时勾选了eslint校验之后，升级vue 2.7版本后，eslint-plugin-vue这个插件需要升级到9+版本，我目前使用的版本是："eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南：2.7日志官方居然把这个写在了变更日志里面，按道理最好官方的文档上也有一份说明的，但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题，但是有时候我们的SFC单文件组件开发的时候，template中的一些变量绑定还是会出现波浪线警告，这...
正确使用vue3的ts类型声明
前言使用了ts最头疼的是什么，除了类型声明应该没有第二家了，那么在vue3中如何正确的声明ts类型，代表着我们踏出了认识vue3的第一步，这非常重要，所以为此水个文章，分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要，因为一直使用的Vetur，而且这个插件刚出来时并不完善，各种视频up讲的那个一键分屏功能其实也并不好用，虽然是个很有意思的东西，但是没有那种非要使用它的点，所以当时的我怀着这么一个疑问？为什么要用Volar ？现在我就通过两张图告诉你，它有多香！我们在template里面写代码，绑定变量最烦的是什么，就是我们写了个对象，但是忘了它的属性有哪些啊，使用...
关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本，特别是安卓4.4这种低版本，transform是一定得增加浏览器前缀的，但是我在项目中遇到了设置无效的问题，极度蛋疼，下面是我的解决教程，当然没这个问题，看这篇文章，相信你对如果给项目增加浏览器前缀，会有很充分的认识。教程给css增加浏览器前缀，业界的做法就是使用postcss，目前webpack与vue cli他们需要安装的依赖略有不同：webpack：pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
vuex 动态注册和卸载模块
概述一般情况下，我们的vuex数据都是静态的，store在首次初始化后数据的格式就定好了，在日常使用中也确实应该这么做。但是，随着业务的发展，vuex可能会变得非常的大，或者在多页面打包的时候，每个页面都需要vuex，但是如果把每个页面的vuex都写在一起，你会发现，原来我a页面可能只需要30个vuex的数据监听，但是会多出来其他页面的数据，这显然不应该的。所以，我们需要一个能够动态加载模块的方法，每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api：registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
vue-i18n 的使用方式
安装vue2版需要安装8.x版本的，9.x的是vue3版本使用上大同小异。vue2安装：yarn add vue-i18n@8vue3安装：yarn add vue-i18n封装官方虽然支持很不错的用法，但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
npm与yarn的一些知识
依赖嵌套地狱虽然新版本的npm也和yarn一样使用了扁平化管理依赖，但是其依赖依旧取决于安装的顺序。比如A依赖中它依赖一个公共库H 1.0版本，那么安装A时同时也会安装H，此时node_modules不存在A、H，那么A和H处于同级关系。过段时间我们需要安装B模块，B模块依赖H的2.0版本，但是node_modules依旧存在了1.0，于是它2.0只能再B模块下的node_modules目录。此时我们存在了两个版本的H公共库。又过一段时间，我们需要安装C模块，C模块也需要H 2.0，那么他也只能将H存放再自己的node_modules目录下。此时我们的H公共库存在了三个，那么还有更多呢，...
vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候，往往常见的做法就是，我在a网站点击一个按钮，在链接中携带query参数啥的，然后去访问b网站页面。此时可能会有两种情况：跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板，跳板会对参数做一些操作，然后进行重定向。两种做法都各有优势：第一种省事简单，但是如果以后b网站链接层级发生变化，那么就会导致链接不可能，到时候还需要进行修改，很痛苦。第二种的话，我们需要写一个跳板页面，但是通过一些参数要求，甚至自身加上一些逻辑处理，那么他的功能性会更强一些。那么，在vue中，做一个重定向页面，怎么做？思路思路1利用路由守卫，当链接上存在某个参数的时候，...
node npm yarn 如何同时运行多个指令
node的bash命令其实是有对应的指令字符的，但是，这个指令只能再linux，mac上才有生效，再windows是无效的，所以了解一下就行。命令说明&&顺序执行多条命令，当碰到执行出错的命令后将不执行后面的命令&并行执行多条命令||顺序执行多条命令，当碰到执行正确的命令后将不执行后面的命令|管道符windows上进行多命令"scripts": { "dev": "cross-env NODE_ENV=development webpack --env development --progress -...
vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧，提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
银联POS机
Google Chrome Android赞!混个脸熟,博客真好看(￣3￣)
木灵鱼儿
FireFox Windows 10[呲牙]我自己写的主题