element-ui自定義樣式

使用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