element-ui自定义样式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/focusdroid/article/details/85252545

使用element-ui自定义样式

0.起一个vue项目，

先使用vue-cli起一个vue项目，

1. 安装sass

// 安装sass，并在配置文件中配置（vue3.x可能不用配置，这是vue2.x）
npm install node-sass sass-loader -D
// 在webpack.base.conf.js里边配置下sass
{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
},

2.安装element-ui

// 安装element框架, 
npm install element-ui -S

// mian.js ，这是element的引入方式（或者按需引入）
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

3.安装element主题工具

// * 注意：是全局安装（-g）
npm install element-theme -g
// 然后安装chalk主题
npm install element-theme-chalk -D

4.初始化变量文件

// 自定义变量文件，默认是element-variables.scss
et -i
// 成功
√ Generator variables file

// 这是element-variables.scss的内容

$--color-primary: #19b74b !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */

修改$--color-primary: #19b74b !default;  #19b74b 的值即可
修改完成时候，编译一下
et

5.引入编译之后的内容

import ElementUI from 'element-ui'
import '../theme/index.css'

Vue.use(ElementUI)

可以使用了，主题色可以任意更改

作者：foucsdroid