vue学习2-2-vux组件库更换主题颜色

一、全局变量 主题颜色配置

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>