構建前端第7篇之---elementUI設置主題,進而改變全局button底色

張艷濤寫於2020-1-20

What:是elementUI主題?

是內置的格式,elementUI默認只有一個主題,如果想整體替換按鈕的顏色等問題,那么就可以用主題

設置步驟

在路徑src/styles/element-variables.scss新建文件

內容為

/**
* I think element-ui's default theme color is too light for long-term use.
* So I modified the default color and you can modify it to your liking.
**/

/* theme color */
$--color-primary: #ff4949;
$--color-success: #13ce66;
$--color-warning: #FFBA00;
$--color-danger: #ff4949;
// $--color-info: #1E1E1E;

$--button-font-weight: 400;

// $--color-text-regular: #1f2d3d;

$--border-color-light: #dfe4ed;
$--border-color-lighter: #e6ebf5;

$--table-border:1px solid#dfe6ec;

/* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

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

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
//最后一行代碼作用為止,以后再研究,目前看不懂

:export {
  theme: $--color-primary;
}

然后再根目錄下的main.js引入import 這個文件

import './styles/element-variables.scss'

就能實現了,現在遇到的問題是工作的實際工程並沒有在main.js引入,而是在setting.js中引入的,待解之謎