Vue3學習之深度剖析CSS Modules與Scope

Css Modules 是透過將標籤類別名稱加裝成獨一無二的類別名，例如.class 轉換成.class_abc_123,類似於symbol，獨一無二的鍵名

Css Scope 是透過為元素增加一個自訂屬性，這個屬性加上獨一無二的編號，而實現作用域隔離。

原則

CSS Modules

#CSS Modules實作CSS模組化的原理就是根據我們在config檔中定義的類別名稱命名規則為類別產生一個獨特的命名，從而實現作用域的隔離。 【相關推薦：vuejs影片教學、web前端開發】

• #轉換前
##

   cell: (h, { col, row }) => {
      // console.log(style);
      return (
        
          
          {row.name}
        
      );
    },

##轉換後

標籤.name-img 被轉換成_name_img_6hlfj_11等

Scoped CSS

# Vue Loader預設使用CSS後處理器PostCSS來實現Scoped CSS，原理就是為聲明了scoped的樣式中選擇器命中的元素添加一個自訂屬性，再透過屬性選擇器實現作用域隔離樣式的效果。

轉換前

轉換後

應用

CSS Modules

關於應用，這裡只針對介紹Vue3版本內的使用問題

在Vue3 中，CSS Modules，在

c9ccee2e6ea535a969eb3f532ad9fe89

上增加module 屬性，即a6167d77ee734aaef6dcd2aa69de7b33 。 a6167d77ee734aaef6dcd2aa69de7b33
程式碼區塊會被編譯為CSS Modules 並且將產生的CSS 類別作為$style 物件的鍵暴露給元件，可以直接在模板中使用$style。而對於如8784e2fd63a27a4a8fec0995a8e86d19 具名CSS Modules，編譯後產生的CSS 類別作為content 物件的鍵暴露給元件，即module 屬性值什麼，就暴露什麼物件。

useCssModule模組名稱使用

注意，同名的CSS Module，後面的會覆蓋前面的。

針對module命名區分，主要也是應用在JSX和TSX的元件中居多

Jsx和Tsx元件內應用

#對於JSX、TSX 元件，由於沒辦法用scoped style，所以CSS Modules 是個很好的選擇:

例如在script裡面寫h函數,直接使用樣式變數

   cell: (h, { col, row }) => {
      // console.log(style);
      return (
        
          
          {row.name}
        
      );
    },

例如render函數

:global選擇器

在Scope或Module中使用global時

:global()允許括號中宣告的選擇器命中全域，即其類別名稱不會經過規則封裝，因此不受作用域的限制。

實際專案中，當我們希望修改所使用元件庫的預設樣式時，在使用CSS Modules方案的情況下，就可以透過:global()來修改其預設樣式，

但是要注意最好外面有一層類別封裝，否則可能會影響全域樣式

。

:deep深度作用選擇器

深度作用選擇器使得父元件的樣式可以滲透到子元件，其原理是使用後代選擇器。

/* 转化前 */


/* 转化后 */
.a[data-v-f3f3eg9] .b {
  /* ... */
}

實際專案中，當我們希望修改所使用元件庫的預設樣式時，在使用Scoped CSS方案的情況下，就可以透過深度作用選擇器來修改其預設樣式。

幾種深度左右選擇器的寫法：

/deep/：已廢棄

• '>>>'：在不使用Sass預處理器時可以使用
• ::v-deep：使用Sass預處理器時使用

但是在Vue3中，已經做出了改進如下：

深度作用選擇器廢棄/deep和>>>，使用
• :deep(.child-class)

  來取代::v-deep

:slotted()選擇器支援使用:slotted(selector)來控制slot中的樣式
:global()選擇器當只有當某些規則需要全域起效時，允許不重複宣告一個全域作用域的style標籤，而是使用:global(selector)來宣告為全域樣式。

小結

深度作用選擇器deep和宣告為global樣式的區別，深度作用選擇器只是為了能讓父元件控制子元件樣式，而global樣式是全域起效的。

需要在vue.config.js中額外配置Vue Loader預設支持，無需額外配置透過根據配置的類別命名規則，為元素生成獨一無二的類別名稱來實現作用域隔離透過給元素自訂hash屬性，再使用屬性選擇器選取元素來實現作用域隔離

CSS Modules	#Scoped CSS

在style標籤中宣告module在style標籤中宣告scoped

###支援匯入其他module的樣式，支援樣式組合######/####### #####透過:global()來解除作用域的隔離，使樣式在全域生效######1. 可以定義全域樣式，使樣式不受作用域限制；2. 可以透過深度作用選擇器命中子元件，從而控制子元件的樣式###############（學習影片分享：###vuejs入門教學###、###程式設計基礎影片### ）###

以上是Vue3學習之深度剖析CSS Modules與Scope的詳細內容。更多資訊請關注PHP中文網其他相關文章！