方案一:
如果仅希望更换 Element 的主题色,推荐使用在线主题生成工具。生成工具的地址:
https://elementui.github.io/theme-chalk-preview/#/zh-CN
点击切换主题色,替换成项目UI的主题色
切换成功之后,“下载主题” 的按钮会高亮,点击下载主题,下载的压缩包是生成的主题颜色样式文件,将文件解压之后,拖入你的项目之中,然后修改 main.js 中 element 样式的引入地址为你拖入的文件
import ElementUI from "element-ui";
// 使用在线配置主题配置工具,配置好主题颜色,生成主题包,引入main.js 那么之前的包就不需要了
// import "element-ui/lib/theme-chalk/index.css";
// 新的主题包
import './assets/css/theme/index.css'
Vue.use(ElementUI);
然后刷新页面,就完成了!
方案二:
element 的 theme-chalk 是使用 SCSS,如果你的项目也刚巧是使用的 SCSS,那么恭喜你,就不需要上面那么繁琐的操作啦.
第一步:在你项目里面创建一个 element-variables.scss 文件,文件的内容如下
/* 改变主题色变量为你想要的颜色 */
$--color-primary: #bf0008;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
/* 引用路径为你的主题样式包的 index.css 文件的相对路径 */
@import "~element-ui/packages/theme-chalk/src/index";
第二步:创建文件成功之后,在 main.js 引入文件
import ElementUI from 'element-ui';
// import "element-ui/lib/theme-chalk/index.css";
// 引用路径为你的 scss 文件的相对路径
import './assets/common/style/element-variables.scss'
Vue.use(ElementUI);
然后刷新页面,就完成了!