vue-cli3.0+elementui 按需引入的自定义主题问题

按需引入成功之后,我想要自定义主题 百度最推荐的方法是去线上主题生成,然后下载引入使用。但是我这里一直说下载包有问题我就放弃,看了很多文章找到了一篇写得不错的,并且解决了问题的方法,这里自己记录一下。
1、首先安装依赖
npm install babel-plugin-component -D
安装以后要记得把sass-loadernode-sass安装一下,不然会报错
npm install node-sass sass-loader --save-dev
2、新建element-variables.scss文件
3、在main.ts中引入。注意放在elementui引入的后面

import './plugins/element.js'
import '@a/styles/element-variables.scss'

4、根据需要编辑element-variables.scss文件,这里打个比方
vue-cli3.0+elementui 按需引入的自定义主题问题_第1张图片

/*主题颜色变量*/
$--color-primary: #f0f;
/*icon字体路径变量*/
$--font-path: '~element-ui/lib/theme-chalk/fonts';
/*按需引入用到的组件的scss文件和基础scss文件*/
@import '~element-ui/packages/theme-chalk/src/base.scss';
@import '~element-ui/packages/theme-chalk/src/rate.scss';
@import '~element-ui/packages/theme-chalk/src/button.scss';
@import '~element-ui/packages/theme-chalk/src/row.scss';

本文原链接在这

你可能感兴趣的:(element-ui,vue.js)