vux修改css樣式的2種辦法

  最近手上有個移動端的項目。前端UI框架是選擇的VUX。可是在使用的時候常常會發現框架自帶的組件樣式和咱們要求的不一致。常常須要手動覆蓋樣式。這裏記錄下咱們使用的2種方法。

咱們以XHeader組件爲例。XHeader組件默認爲藏青色。

全局方式

找到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裏面增長

/**
* Header
*/
@header-background-color: #3cc51f;
@header-title-color: black;

局部方式

  因爲有時候咱們一個界面有多個組件。樣式都不一致的時候。全局方式就不適用了。因此咱們須要採用局部的方式。一樣仍是XHeader咱們此次須要把他們在同個界面把顏色修改爲2種顏色能夠使用/deep/ 或者>>>這裏方式來修改。

<template>
  <div class="wrap">
    <x-header class="">XX銀行<a slot="right"></a>
    </x-header>
    <div class="wrap1">
      <x-header class="">XX銀行<a slot="right"></a>
      </x-header>
    </div>
    <toast v-model="isToast" type="text" position="middle" :text="toastTxt" width="auto"></toast>
  </div>
</template>

<style scoped>
  .wrap /deep/ .vux-header {
    background-color: #3cc51f;
  }
  .wrap1 >>> .vux-header {
    background-color: red;
  }
</style>