[新手坑] 01.Vue模板內引入的組件樣式覆蓋失效

[新手坑] 01.Vue模板內引入的組件樣式覆蓋失效

做爲一名剛接觸Vue的菜鳥, 開發過程當中遇到一些小坑又很難搜索的到, 仍是記錄下來. 分享給有遇到過相似問題的人.

Vue項目中假設用到Vant.js這個UI庫, 具體引入組件啥的我就不詳細說了, 直接看代碼:

<template>
  <div class="login">
    <my-btn type="default">{{msg}}</my-btn>
  </div>
</template>

<script>
import { Button } from 'vant'
export default {
  name: 'App',
  components: {
    myBtn: Button
  },
  data() {
    return {
      msg: 'whidy is poor XD'
    }
  }
}
</script>

<style scoped>
.van-button {
  width: 600px;
}
.van-button__text {
  font-size: 40px;
}
</style>

以上代碼的寫法不仔細看的話, 經過頁面來看, my-btn組件其實是Button, 而Vant的Button會生成相似以下:

<button data-v-0f984ad8="" class="van-button van-button--default van-button--normal"><!----><span class="van-button__text">whidy is poor XD</span></button>

其中的van-button的確寬度變成600px了, 而這個van-button__text卻沒有反應. 彷佛一會兒就傻眼了. 去掉scoped纔有效果, 但是爲啥要把這個做用域去了才行. 這個不符合咱們需求, 由於這樣會形成全局污染. 我僅僅是想要在這個頁面中的按鈕文本字體發生改變!

問題緣由

scoped是必不可少的, 可是我寫了這個樣式爲什麼沒法生效? 緣由很簡單, 由於當前樣式僅適用於當前Vue模板的, 而模板中引入的其餘組件實際上是沒法被渲染的.

解決方案

所以對於模板中引入第三方UI框架的樣式如何改寫, 正確方式是寫一個優先級高於原組件的全局樣式來覆蓋默認樣式, 好比

<my-btn type="default" class="reset">{{msg}}</my-btn>

完整的代碼以下

<template>
  <div class="login">
    <my-btn type="default" class="reset">{{msg}}</my-btn>
  </div>
</template>

<script>
import { Button } from 'vant'
export default {
  name: 'App',
  components: {
    myBtn: Button
  },
  data() {
    return {
      msg: 'whidy is poor XD'
    }
  }
}
</script>

<style scoped>
.van-button {
  width: 600px;
}
</style>

<style>
.reset .van-button__text {
  font-size: 40px;
}
</style>

固然這裏只是示例, 我的並不建議在模板上寫多個style塊, 因此個人作法通常仍是在assets目錄內新建一個例如resetui.css文件, 專門存放這些須要被從新修改的樣式代碼. 而且以組件的類名來進行維護, 好比上面一段, 最後處理好的代碼應該是引入一個全局resetui.css, 而且該文件內的樣式(我用了PostCSS)例如:

.login {
  .van-button__text {
    font-size: 40px;
  }
}

這樣就很好的解決了做用域和組件樣式的問題了, 所以理解Vue模板和組件之間的做用域也是相當重要的~

其實這部份內容在官方文檔有寫, 不過大部分新手在閱讀文檔後, 並無真正實踐, 因此也就很容易忽略, 這裏簡單的作了個總結, 但願你們可以注意哦~

我其實也很想可以作到, 當前模版內的scoped樣式可以生效於當前模版內的全部組件的辦法, 不過彷佛是作不到的? 所以目前仍是暫時按照上面的解決方案處理吧~

參閱: 官方文檔 - Class與Style綁定 - 用在組件上

我了更好的學習Vue-cli, 我在GitHub上建了一個 vue-cli-mobile-study項目, 用於記錄一些小技巧和坑, 其中記錄過程當中若是有問題, 也但願你們指出包涵~

下期: 02.Vue開發環境和生產環境樣式不一致的問題