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