elementUI在按需加载的情况下更换主题样式

一.  全局加载和按需加载的对比

1. 全局引入elementUI后, 打包后css的体积: 

 其中, chunk-vendors.css打包的是第三方库的样式, 36.22kb,  chunk-common.css打包的是全局的公共样式

2. 按需导入elementUI组件后, 打包后css的体积为27.67kb

 对比之后, css的体积缩小了8.5kb左右,  js的体积也会相对减少, 这样的好处就是提升性能, 减少内存

二.  按需加载的步骤

tips: 按照elementUI的官网操作即可,链接: Element - The world's most popular Vue UI framework

1. 下载babel-plugin-component

yarn  add babel-plugin-component  -D

2. 在babel.config..js配置按需加载

"plugins": [ 
    [ "component", 
      { 
        "libraryName": "element-ui", 
        "styleLibraryName": "theme-chalk" 
       } 
    ] 
]

3. 在src中新建element/index.js文件

import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  ... // 此处省略n个
  Empty,
} from 'element-ui';

const components = [
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  ... // 此处省略n个
  Empty,
];

export default {
  install: (Vue) => {
    components.forEach(component => {
      console.log(component.name)
      Vue.component(component.name, component)
    })

    Vue.use(Loading.directive);

    Vue.prototype.$loading = Loading.service;
    Vue.prototype.$msgbox = MessageBox;
    Vue.prototype.$alert = MessageBox.alert;
    Vue.prototype.$confirm = MessageBox.confirm;
    Vue.prototype.$prompt = MessageBox.prompt;
    Vue.prototype.$message = Message;
  }
}

4. 在main.js中导入并注册

import ElementUI from '@/element';

Vue.use(ElementUI);

tips:  全局引入elementUI后还需要全局引入其css,  按需引入后则不需要引入全局的css了, 因为babel-plugin-component插件会在按需导入某一组件也会自动导入该组件的样式, 如图所示: 

 

 该插件官网: babel-plugin-component - npm

三.  在按需加载后, 更换主题样式

背景:

1. 在官网中, 自定义主题样式需全局引入elementUI的样式, 这样冲突了按需加载的效果. 如下图: 

 

解决:

1. 新建styles/variables.scss文件, 用于存放需要被覆盖的样式变量:

$--color-primary: #507AFE;

2. 在vue.config.js中配置css loaderOptions

 这样css在编译时会把variables.scss文件中的变量覆盖掉elementUI内置的变量

但是有一个前提, 你引入的样式必须是scss文件 , 只有scss才支持变量, 才会被覆盖. css只是一个静态文件

全局引入element样式的路径得指向到index.scss

// 在main.js文件中

import ElementUI from 'element-ui';

// 之前引入的css文件
// import 'element-ui/lib/theme-chalk/index.css'

// 改成引入scss文件
import 'element-ui/packages/theme-chalk/src/index.scss'

如今, 按需引入的babel配置项中,  默认会找theme-chalk中的css文件, 从官网中可知:

最终解决方案: 

 a. 让styleLibraryName属性指向到具体的scss路径(思路: 去源码中打印其路径)

 b. 设置ext属性, 让babel默认找scss文件(思路: 去babel-plugin-component源码中查找其配置项)

 大功告成!