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

通过修改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变量:

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

4.import scss文件

在main.js中import './styles/element-variables.scss';

5.按需引入

main.js:
 
import Vue from 'vue'
import App from './App.vue'
import Button from 'element-ui/lib/button';
import './styles/element-variables.scss';
Vue.use(Button)
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
}).$mount('#app')
 
 
 
element-variables.scss:
 
/* 改变主题色变量 */
$--color-primary: red;
 
/*改变button*/
$--button-font-size:64px;
 
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
 
@import "~element-ui/packages/theme-chalk/src/button";
 
 
 
babel.config.js:
 
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
  //   [
  //     "component",
  //     {
  //       "libraryName": "element-ui",
  //       "styleLibraryName": "theme-chalk"
  //     }
  //   ]
   ]
}

如果有修改scss变量无法修改的样式

推荐使用组件化

可以直接覆盖element的class

.el-card{
    &__header {
        padding: 5px 10px;
    }
}

/* 改变主题色变量 */
$--color-primary: red;
 
/*改变button*/
$--button-font-size:64px;
 
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
 
@import "~element-ui/packages/theme-chalk/src/button";
@import "~element-ui/packages/theme-chalk/src/card";
@import "./components/el-card.scss"

*/deep/

作用:
当你不想写全局样式,想写scoped局部样式不污染全局,又想更改子组件内的样式,此时就可以用/deep/深度作用选择器.