vue vux修改css样式如页头等等

没废话，上代码！

1.全局方式

找到build目录下的webpack.base.conf

在最后加入以下2行

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

加入后注意path的路径，然后我们在theme.less里面增加

/**
* XHeader页头背景色和文字颜色，更多样式变量参考vux文档
*/
@header-background-color: #FFF;
@header-title-color: #000;

2.局部方式

当一个界面有多个组件，样式都不一样的时候，就需要局部配置样式了。同样还是XHeader，需要把同个界面把颜色修改成2种颜色可以使用

/deep/

或者

>>>

方式来修改

<template>
	<div>
	  <div class="header1">
	    <x-header>我是蔡徐坤<a slot="right"></a>
	    </x-header>
	  </div>
   	  <div class="header2">
      	<x-header>我喜欢唱跳rap<a slot="right"></a>
      	</x-header>
      </div>
 	</div>
</template>

<style scoped>
  .header1 /deep/ .vux-header {
    background-color: #FFF;
  }
  .header2 >>> .vux-header {
    background-color: #000;
  }
</style>

这篇文章结束啦，但脚步永远不会停止，一起加油哦！