如何修改element-ui样式 支持按需引入

通过修改sass变量、class，全局修改element-ui样式。

1.安装sass

1. 查看自己的 node 版本
node -v

2.判断情况
当 node 版本低于 14 时，安装以下两个版本，
    "node-sass": "4.14.0",
    "sass-loader": "7.1.0"

当 node 版本为16x 时，安装以下两个版本
    "node-sass": "6.0.1",
    "sass-loader": "10.2.0"

2.新建一个样式文件

例如 element-variables.scss，写入以下内容：

/* 改变主题色变量 */
$--color-primary: teal;

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

@import "~element-ui/packages/theme-chalk/src/index";

3.找到样式文件

node_nodules/element-ui/packages/theme-chalk/src/common/var.scss

找到需要修改的样式，复制到element-variables.scss中。

修改scss变量: