一、全局变量 主题颜色配置
1.vue项目的src目录下建立style文件夹,在style文件夹中建立theme.less
theme.png
2.在bulid文件夹中的webpack.base.conf.js中配置,来覆盖原生样式
module.exports = vuxLoader.merge(webpackConfig, {
plugins: [
{name: 'vux-ui'},
{
name: 'less-theme',
path: 'src/style/theme.less'
}
]
})
3. 编辑style文件夹中的theme.less(你想要修改的插件主题,可以参考官网给出的https://github.com/airyland/vux/blob/v2/src/styles/variable.less)
二、局部变量
在类名后面加 /deep/ 或者 >>> 即可修改。
<style scoped>
.chargeRecordPage /deep/ .weui-media-box {
padding: 14px;
}
.chargeRecordPage /deep/ .weui-media-box__desc {
margin: 1px;
}
.chargeRecordPage >>> .weui-media-box__info {
margin: auto;
}
.chargeRecordPage >>> .weui-media-box__desc {
font-size: 14px
}
</style>