這篇文章主要講解了“Vue3的CSS Modules和Scope怎么使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Vue3的CSS Modules和Scope怎么使用”吧！

為安平等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及安平網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、安平網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

Css Modules 是通過(guò)對(duì)標(biāo)簽類名進(jìn)行加裝成一個(gè)獨(dú)一無(wú)二的類名，比如.class 轉(zhuǎn)換成.class_abc_123,類似于symbol，獨(dú)一無(wú)二的鍵名

Css Scope 是通過(guò)為元素增加一個(gè)自定義屬性，這個(gè)屬性加上獨(dú)一無(wú)二的編號(hào)，而實(shí)現(xiàn)作用域隔離。

原理

CSS Modules

CSS Modules實(shí)現(xiàn)CSS模塊化的原理就是根據(jù)我們?cè)赾onfig文件中定義的類名命名規(guī)則給類生成一個(gè)獨(dú)一無(wú)二的命名，從而實(shí)現(xiàn)作用域的隔離。

• 轉(zhuǎn)化前

  .title {
    font-size: 14px;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    font-weight: 700;
    color: #13161b;
  }
  .name {
    display: flex;
    align-items: center;
    &-img {
      width: 24px;
      height: 24px;
      border-radius: 4px;
    }
    &-text {
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      color: #13161b;
    }
  }

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

• 轉(zhuǎn)化后

標(biāo)簽.name-img 被轉(zhuǎn)化成了_name_img_6hlfj_11等

Scoped CSS

Vue Loader默認(rèn)使用CSS后處理器PostCSS來(lái)實(shí)現(xiàn)Scoped CSS，原理就是給聲明了scoped的樣式中選擇器命中的元素添加一個(gè)自定義屬性，再通過(guò)屬性選擇器實(shí)現(xiàn)作用域隔離樣式的效果。

• 轉(zhuǎn)化前

.example {
  color: red;
}

• 轉(zhuǎn)化后

應(yīng)用

CSS Modules

關(guān)于應(yīng)用，這里只針對(duì)介紹Vue3版本內(nèi)的使用問(wèn)題

在 Vue3 中，CSS Modules，在 .success {   color: pink; } .success {   color: blue; }

注意，同名的CSS Module，后面的會(huì)覆蓋前面的。

針對(duì)module命名區(qū)分，主要也是應(yīng)用在JSX和TSX的組件中居多

Jsx和Tsx組件內(nèi)應(yīng)用

對(duì)于 JSX、TSX 組件，由于其沒(méi)辦法用 scoped style，所以 CSS Modules 是個(gè)很好的選擇:

比如在script里面寫(xiě)h函數(shù),直接使用樣式變量

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

比如render函數(shù)

.span1 {
  color: blue;
  font-size: 40px;
}

:global選擇器

在Scope或者M(jìn)odule中使用global時(shí)

:global()允許括號(hào)中聲明的選擇器命中全局，即其類名不會(huì)經(jīng)過(guò)規(guī)則封裝，因此不受作用域的限制。

實(shí)際項(xiàng)目中，當(dāng)我們希望修改所使用組件庫(kù)的默認(rèn)樣式時(shí)，在使用CSS Modules方案的情況下，就可以通過(guò):global()來(lái)修改其默認(rèn)樣式，但是要注意最好外面有一層類封裝，否則可能影響全局樣式。

:deep深度作用選擇器

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

/* 轉(zhuǎn)化前 */

.a :deep(.b) {
  /* ... */
}


/* 轉(zhuǎn)化后 */
.a[data-v-f3f3eg9] .b {
  /* ... */
}

實(shí)際項(xiàng)目中，當(dāng)我們希望修改所使用組件庫(kù)的默認(rèn)樣式時(shí)，在使用Scoped CSS方案的情況下，就可以通過(guò)深度作用選擇器來(lái)修改其默認(rèn)樣式。

幾種深度左右選擇器的寫(xiě)法：

• /deep/：已廢棄

• '>>>'：在不使用Sass預(yù)處理器時(shí)可以使用

• ::v-deep：使用Sass預(yù)處理器時(shí)使用

但是在Vue3中，已經(jīng)作出了改進(jìn)如下：

• 深度作用選擇器廢棄/deep和>>>，使用 :deep(.child-class)來(lái)替代::v-deep

• :slotted()選擇器支持使用:slotted(selector)來(lái)控制slot中的樣式

• :global()選擇器當(dāng)只有某些規(guī)則需要全局起效時(shí)，允許不重復(fù)聲明一個(gè)全局作用域的style標(biāo)簽，而是使用:global(selector)來(lái)聲明為全局樣式。

小結(jié)

深度作用選擇器deep和聲明為global樣式的區(qū)別，深度作用選擇器只是為了能讓父組件控制子組件樣式，而global樣式是全局起效的。

感謝各位的閱讀，以上就是“Vue3的CSS Modules和Scope怎么使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Vue3的CSS Modules和Scope怎么使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！