[project]element-ui 按需加载自定义主题姿势

按需引入组件库

1. 安装依赖
   npm install babel-plugin-component -D
2. 配置.babelrc

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

3. 在main.js中按需引入

import { Button, Select } from 'element-ui';
Vue.use(Button);
Vue.use(Select);

自定义主题配置

element ui 给出了两种方案：

1. 项目中使用了 SCSS，使用 SCSS 替换变量改变主题色
2. 使用命令行主题工具配置生成自定义主题 css 文件

当前项目中用到了 SCSS，使用第一种方案。

• 新建 element-variables.scss 文件

/* 改变主题色变量 */
$--color-primary: red;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";

• 在项目入口引入样式文件

import Element from 'element-ui';
import './element-variables.scss';
Vue.use(Element);

• 效果

  
  
  result
  
  

  通过scss变量重新赋值覆盖!default变量修改主题色。

  
  
  var.scss

• build
  查看打包结果，发现 elementui 完整样式被打包进 app.css 里了，打包后大小为 1.18m, css 大小为 268kb。

  
  
  build

  app.css 与 vendors.css 都打包了 elementui 样式，app.css 打包了完整 elementui 样式，vendors.css 打包了按需载入组件的样式。

  
  
  app.css 与 vendors.css都打包了elementui样式

  既然 app.css 打包了完整的 elementui 样式，那么 vendors.css 的样式就可以去掉了。

  修改.babelrc配置

    [
      'component',
      {
        libraryName: 'element-ui',
        // styleLibraryName: 'theme-chalk', // 移除
        style: false, // 添加
      },
      'element-ui',
    ],

打包后 vendors.css 文件里的 elementui 的样式被移除掉了，css 文件大小由 268kb 减小为 229 kb。

打包文件还是太大，尝试使用第二种方案。

• 安装命令行主题工具

yarn add element-theme --save
yarn add element-theme-chalk --dev

tips: glup 脚本依赖低版本 node，建议版本切换为 10.18.0

• 生成初始化 scss 变量（项目中已生成可以跳过这步）

node_modules/.bin/et -i ./src/styles/element-variables.scss

• 添加编译文件
  theme-build.js

const et = require('element-theme');
// 编译
et.run({
  config: './src/styles/element-variables.scss', // 配置参数文件路径 默认`./element-variables.css`
  out: './src/styles/element-theme', // 输出目录 默认`./theme`
  minimize: false, // 压缩文件
  browsers: ['ie > 9', 'last 2 versions'], // 浏览器支持
});

theme-watch.js

const et = require('element-theme');
// 实时编译模式
et.watch({
  config: './src/styles/element-variables.scss', // 配置参数文件路径 默认`./element-variables.css`
  out: './src/styles/element-theme', // 输出目录 默认`./theme`
});

• 配置 package.json 脚本

  "scripts": {
    "element-theme-build": "node scripts/element-ui/theme-build.js",
    "element-theme-watch": "node scripts/element-ui/theme-watch.js"
  },

• 修改 babel.config.js

// config plugins Array
plugins: [
  [
    "component",
    {
      libraryName: "element-ui",
      styleLibraryName: "~src/styles/element-theme", // 修改为生成的自定义目录
    },
    "element-ui",
  ],
];

• 修改element-variables.scss文件

$--color-primary: red;
...

• 生成自定义主题

yarn run element-theme-build

• 查看效果

  自定义主题引入成功。

  
  
  result

• 打包

  查看打包结果，打包后大小由 1.18m 减少为 743kb, css 大小由 268kb 减少为 34kb。

  
  
  build
  
  
  css

.End