https://element.eleme.cn/#/zh-CN/component/custom-theme
在 /src/styles ⽬录下创建以下样式⽂件
在 variables.scss 中添加以下样式变量（符合项⽬⻛格的颜⾊、字体），设置样式时可以直接使⽤，便于维护
// styles/variables.scss
$primary-color: #40586F;
$success-color: #51cf66;
$warning-color: #fcc419;
$danger-color: #ff6b6b;
$info-color: #868e96; // #22b8cf;
$body-bg: #E9EEF3; // #f5f5f9;
$sidebar-bg: #F8F9FB;
$navbar-bg: #F8F9FB;
$font-family: system-ui, -apple-system, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
在 index.scss 中添加以下样式，作为全局样式
// styles/index.scss
@import ‘./variables.scss’;
// globals
html {
font-family: $font-family;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
// better Font Rendering
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
background-color: $body-bg;
}
// custom element theme 更改 element 主题色
$—color-primary: $primary-color;
$—color-success: $success-color;
$—color-warning: $warning-color;
$—color-danger: $danger-color;
$—color-info: $info-color;
// change font path, required 改变 icon 字体路径变量，必需
$—font-path: ‘~element-ui/lib/theme-chalk/fonts’;
// import element default theme 引入 element 默认主题文件（样式文件）
@import ‘~element-ui/packages/theme-chalk/src/index’;
// node_modules/element-ui/packages/theme-chalk/src/common/var.scss
// overrides
// .el-menu-item, .el-submenu__title {
// height: 50px;
// line-height: 50px;
// }
.el-pagination {
color: #868e96;
}
// components
.status {
display: inline-block;
cursor: pointer;
width: .875rem;
height: .875rem;
vertical-align: middle;
border-radius: 50%;
&-primary {
background: $—color-primary;
}
&-success {
background: $—color-success;
}
&-warning {
background: $—color-warning;
}
&-danger {
background: $—color-danger;
}
&-info {
background: $—color-info;
}
}
在⼊⼝⽂件 src/main.js 中引⼊全局样式⽂件 index.scss，同时移除⼊⼝⽂件中的 element 样式⽂件引⼊
- // 引⼊ element 样式⽂件 (在全局样式⽂件中修改 element 主题后引⼊了)
- import ‘element-ui/lib/theme-chalk/index.css’
+ // 引⼊全局样式
+ import ‘./styles/index.scss’
