Vue ElementUI 自定义主题操作步骤

官网自定义主题有说明，打开一个 vue 项目：

1. 安装 element-ui

npm i element-ui -S

2. 安装 sass

npm i sass-loader node-sass -D

在 vue.config.js 文件的 module.rules 中添加配置

{
    test: /\.sass$/,
    loaders: ['style', 'css', 'sass']
}

 3. 安装elementui的自定义主题工具

npm i element-theme -g

4. 安装主题相关的包

npm i element-themex element-theme-chalk -D

5. 初始化变量文件 element-variables.scss

node_modules/.bin/et -i

根目录出现如下文件

 6. 根据 需求改 element-variables.scss 里的变量信息

7. 编译

.\node_modules\.bin\et

根目录下出现编译后的文件夹 theme

8. 使用将编译后的文件夹 theme 拷贝到相关项目，引入自定义主题。在main.js的入口文件中引入

import './theme/index.css'