木灵鱼儿

木灵鱼儿

阅读：4009

最后更新：2020/10/19/ 17:45:47

element ui 自定义主题按需导入样式 yarn

最近发现了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
木灵鱼儿

木灵鱼儿

发布了 716 篇文章获得点赞 1913获得阅读 4009

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three
  1. 银联POS机
    银联POS机
    Google Chrome Android

    赞!混个脸熟,博客真好看(￣3￣)

    回复
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @银联POS机

      [呲牙]我自己写的主题

      回复

关于作者

站点职位 博主
获得点赞 1913
文章被阅读 4009

相关文章

利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类
利用typescript实现原生css变量的主题切换功能类利用typescript实现原生css变量的主题切换功能类
typecho主题开发：基于webpack5的多页面打包项目typecho主题开发：基于webpack5的多页面打包项目