vue組件樣式覆蓋問題-module

例如你寫個組件，組件根dom上有個類名控制組件高度是300px，即組件默認的高度是300px；

用的時候你給這個組件上價格類名控制組件高度是150px；

這種情況下渲染結果為：

可以看出調用者寫的樣式竟然覆蓋不了組件自身的默認樣式，這肯定是不科學的。

 

那怎么辦呢？

解決的思路肯定是增加調用者的權重，可以給height加上!importent; 肯定是能解決問題的 ， 但費半天勁只為了寫這個!importent肯定會被看官罵，那會有更好的解決方法嗎？

那是必須的 

 

那就是用module去替代scoped：這樣做的好處是編譯渲染之后class類名不會加上屬性名選擇器增加權重，就能顯示調用者的樣式了。

修改如下：

<template>
  <div :class="$style.root"></div>
</template>

<script>
export default {
  data() {
    //這里存放數據
    return {};
  }
};
</script>
<style module>
.root {
  height: 300px;
  background-color: #aabbcc;
}
</style>

用法不用變，渲染結果如下：

就覆蓋不了調用者的樣式了 ，完美！

 

vue官方是這樣說的：

CSS Modules 是一個流行的，用於模塊化和組合 CSS 的系統。vue-loader 提供了與 CSS Modules 的一流集成，可以作為模擬 scoped CSS 的替代方案。

 

用法：

1.在style標簽中用module替換scoped

2.樣式表用$style注入

3.注入時候也支持vue的對象/數組語法

　　

<template>
  <div :class="{[$style.root]:true,[$style.mt8]:isMt}"></div>
  <!-- <div :class="$style.root"></div> -->
</template>

<script>
export default {
  data() {
    //這里存放數據
    return {
      isMt:true
    };
  }
};
</script>
<style module>
.root {
  height: 300px;
  background-color: #aabbcc;
}
.mt8{
  margin-top: 8px;
}
</style>

4.style不用整

你也可以通過 JavaScript 訪問到它：

let mt8 = this.$style.mt8;

 

注意：vue loader 上說：首先，CSS Modules 必須通過向 css-loader 傳入 modules: true 來開啟，但是我沒有整也可以了

 

參考文檔（vue loader文檔)：https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95

 

 over！