vue使用css能夠把modules取代scroped有哪些方法？

這篇文章主要介紹了在vue中使用css modules取代scroped的方法，現在分享給大家，也給大家做個參考。

前面的話

css modules是一種流行的模組化和組合CSS的系統。 vue-loader提供了與css modules的集成，作為scope CSS的替代方案。本文將詳細介紹css modules

引入

最開始使用Vue的時候，提倡並大量使用的是scoped這種技術

<style scoped>
 @media (min-width: 250px) {
  .list-container:hover {
   background: orange;
  }
 }
</style>

這個可選scoped 屬性會自動加入一個唯一的屬性(例如data-v-21e5b78) 為元件內CSS 指定作用域，編譯的時候.list-container:hover 會被編譯成類似.list-container[data-v- 21e5b78]:hover

但是，它並不能完全避免衝突

<span data-v-0467f817 class="errShow">用户名不得为空</span>

以上面的程式碼為例，使用scoped之後，它在元素上添加了一個唯一的屬性'data-v -0467f817'，CSS樣式被編譯如下

.errShow[data-v-0467f817] {
  font-size: 12px;
  color: red;
}

但是，如果使用者也定義了一個errShow類別名，會影響到所有定義為errShow類別名稱的元件的顯示

而CSS modules則做的更徹底，它不是添加屬性，而是直接改變類別名稱

<span class="_3ylglHI_7ASkYw5BlOlYIv_0">用户名不得为空</span>

這樣，大大降低了衝突的可能性，只要不是用戶直接給span標籤設定樣式，基本上不會影響元件的顯示

模組化

CSS Modules既不是官方標準，也不是瀏覽器的特性，而是在建構步驟中對CSS類別名稱選擇器限定作用域的一種方式（透過hash實現類似於命名空間的方法）。類別名稱是動態產生的，唯一的，並準確對應到原始檔案中的各個類別的樣式

實際上，CSS Modules只是CSS模組化的一種方式。為什麼我們需要CSS模組化呢？

CSS的規則都是全域的，任何一個元件的樣式規則，都對整個頁面有效。於是，亟待解決的就是樣式衝突（污染）的問題。一般地，為了解決衝突，會把class命名寫長一點，降低衝突幾率；加上父元素的選擇器，來限制範圍等

##CSS模組化就是來解決這個問題的，一般地，分為三類

1、命名約定類別

該類別CSS模組化方案主要用來規範CSS命名，最常見的是BEM，當然還有OOCSS等等，在建構工具出現之前，大多數都是在CSS命名上做文章

2、CSS in JS

徹底拋棄CSS，用javascript來寫CSS規則，常見的有styled -components

3、使用JS來管理樣式

使用JS編譯原生的CSS文件，使其具備模組化的能力，最常見的就是CSS Modules

#著建構工具的興起，越來越多的人開始使用後兩者方案，書寫CSS時，不用再刻意關心樣式衝突問題。只需要使用約定的格式編寫程式碼即可

寫法

下面來介紹CSS modules的寫法

在style標籤中加入module屬性，表示開啟CSS-loader的模組模式

<style module>
.red {color: red;}</style>

在模板中使用動態類別綁定:class，並在類別名稱前面加上'$style.'

<template>
 <p :class="$style.red">
  This should be red
 </p>
</template>

如果類別名稱包含中劃線，則使用中括號語法

<h4 :class="$style[&#39;header-tit&#39;]">类别推荐</h4>

也可以使用陣列或物件語法

  <p :class="{ [$style.red]: isRed }">
   Am I red?
  </p>
  <p :class="[$style.red, $style.bold]">
   Red and bold
  </p>

更複雜的物件語法

  <ul 
　　　 :class="{
    [$style.panelBox]:true,
    [$style.transitionByPanelBox]:needTransition
   }"

更複雜的陣列語法

  <li
   :class="[
    $style[&#39;aside-item&#39;],
    {[$style[&#39;aside-item_active&#39;]]:(i === index)}
   ]"

配置

css-loader關於CSS modules的預設配置如下

{
 modules: true,
 importLoaders: 1,
 localIdentName: '[hash:base64]'
}

可以使用vue-loader的cssModules選項為css-loader進行自訂的配置

module: {
 rules: [
  {
   test: '\.vue$',
   loader: 'vue-loader',
   options: {
    cssModules: {
     localIdentName: '[path][name]---[local]---[hash:base64:5]',
     camelCase: true
    }
   }
  }
 ]
}

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

nodejs acl的使用者權限管理詳解

nodejs實作解析xml字串為物件的方法範例

微信小程式實作換膚功能#

以上是vue使用css能夠把modules取代scroped有哪些方法？的詳細內容。更多資訊請關注PHP中文網其他相關文章！