element-ui 主题

1. 切换 node 版本到 11.15.0
2. 安装 element-theme（CLI） 和 element-theme-chalk （主题）
3. 生成变量文件 element-variables.scss
4. 基于变量文件生成 element-ui 所有的样式文件

1. 环境

推荐使用 nvm 安装并切换多个 node 版本

# node 版本
node -v

    v11.15.0

# npm 版本
npm -v
    
    6.7.0

高于 11.x 版本的 node，会报错 —— referenceerror primordials is not defined

2. 命令行工具和主题

安装命令行工具 et ：

npm i -D element-theme

安装主题：

npm i -D element-theme-chalk

3. 变量文件

初始化变量文件：（生成默认配置的 scss 变量文件）

et --init ./src/commons/styles/theme/default/element-variables.scss

4. 编译

# 编译
et  --config ./src/commons/styles/theme/default/element-variables.scss --out ./src/commons/styles/theme/default

# 压缩
et ...  --minimize

# 实时编译
et ...  --watch

5. 按需加载

babel 配置

安装依赖：

npm i -D babel-plugin-component

babel.config.js:

module.exports = {
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: '~src/commons/styles/theme/default/styles',
        // style: false,
      },
    ],
  ],
};

6. 参考

• 彻底学会element-ui按需引入和纯净主题定制 (opens new window)

7. et 报错问题

说明：

• et, element-theme
• element-ui v2
• et 要求 node.js ^11

错误：

ReferenceError: primordials is not defined

解决：

1. 创建 proj/shrinkwrap.json 文件

   {
     "dependencies": {
       "graceful-fs": {
         "version": "4.2.2"
       }
     }
   }
   

2. 执行 npm i

参考：

• how-to-fix-referenceerror-primordials-is-not-defined-error/ (opens new window)