最近发现了element主题的一个知识点,应该可以方便大家。

前提

项目里的组件都是按需导入,然后要求使用自定义主题,但是设计师只给了一个官方在线主题生成工具生成的主题zip包。

这个主题压缩包打开发现只有一个index.css,一个font文件夹,一个config.json文件。

css文件大概会有200kb以上。

而我们的按需引入是引入一个组件,就会引入对应的样式文件,他不会一口气引入所有的样式,但是如果要使用自定义主题,index.css又不得不引入,导致按需引入达不到理想状态。

我们现在就要解决这个css的问题。

思路

打开config.json文件,你可以看到一些键值对,仔细看一下,你可以发现这些就是设计师给你设置的颜色,每个key对应了一个scss变量名。

而饿了么框架他的颜色,就是根据这些颜色变量名进行衍生的,比如:在这个颜色的基础上,颜色加深,颜色变浅

那么我们知道了设计师操作了哪些颜色,我们的开展空间就大了。

已知条件

  1. 我们需要每个组件对应的css样式文件
  2. 我们知道操作的颜色是哪些

未知条件

  1. 怎么生成对应组件的css样式文件
  2. 怎么自动按需导入样式文件

教程

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目录下,这些都是允许的。

然后重启项目,你会发现,你的样式是按需引入的,并且还是自定义主题。

分类: vue 项目实战 标签: vueyarnelement饿了么自定义主题按需引入按需引入样式element-themeelement-theme-chalk

评论

全部评论 2

  1. 银联POS机
    银联POS机
    Google Chrome Android
    赞!混个脸熟,博客真好看( ̄3 ̄)
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @银联POS机[呲牙]我自己写的主题

目录