element-ui替换主题色介绍

一 ：在项目中改变 SCSS 变量
1、element-ui的主题包是使用scss编写，如果项目也使用scss，可以直接在项目中改变element的样式变量
2、步骤

1、先在新建一个variables.scss变量文件，文件里添加
/* 改变主题色变量 */
$--color-primary: #ff8400;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

/* 一定要放在最后 */
@import "~element-ui/packages/theme-chalk/src/index";

2、之后，在项目的入口文件中，直接引入以上样式文件即可
import Vue from 'vue'
import Element from 'element-ui'
import './variables.scss'

Vue.use(Element)

为什么@import "~element-ui/packages/theme-chalk/src/index"要放最后啦？？？

如下图片所示，theme-chalk里定义的变量都有 !default 结尾，
他的含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默值。

我们提前在顶部声明了变量，使它不用使用自己的默认值，这样就达到了修改element-ui组件主题色的效果

image.png

注意！！！
目前步骤变量只在element-ui组件生效，该变量给其他scss使用会报错

要想把这个变量也作为普通的全局变量，且不用在项目的入口文件中引入样式文件
需要在vue.config.js里加上下面逻辑就可以直接使用（？？？不明白）
    css: {
        loaderOptions: {
            sass: {
                prependData: '@import "~@/styles/variables.scss"; // 引入全局变量
            }
        }
    },

3、缺点
缺点：初始编译特别慢（？？？？不明白）

二：引入自定义主题
1、步骤

1、先生成下载一个主题包解压放在src目录下（如下图所示）
2、在项目的入口文件中直接引入（如下图所示）
import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'

Vue.use(ElementUI)
3、完成element-ui组件主题色更换

image.png