vux 修改主题配色的两种方法

最新推荐文章于 2024-07-25 12:02:54 发布

「已注销」

最新推荐文章于 2024-07-25 12:02:54 发布

阅读量1.1k

点赞数

文章标签： vux vue

本文链接：https://blog.csdn.net/Jasons_xie/article/details/84869973

版权

1.全局变量

在build中的webpack.base.conf.js 配置文件里，将你的less文件配置进去

module.exports=vuxLoader.merge(webpackConfig,{
  plugins:[
    {name: 'vux-ui'},
    {name: 'less-theme', path: 'src/style/theme.less'}
  ]
})

在 src/style/theme.less 中写入 less样式文件是自己创建的
```
@header-arrow-color:#333;
```
这样就可以修改全局样式了

2.局部变量

在类名后面加 /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
}