element-ui自定義樣式
阿新 • • 發佈:2018-12-30
使用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