// vue.config.js
// 使用vue-cli的話，可以直接在該文件中配置，不用暴露webpack的配置
?
module.exports = {
    css: {
        // 開啟CSS Modules
        requireModuleExtension: true;
        loaderOptions: {
            // 向loader傳遞配置選項
            css: {
                modules: {
                    // 自定義類命名規(guī)則
                    // 在我們的項目中，對類的命名是根據(jù)環(huán)境不同而改變的，開發(fā)環(huán)境中會展示該類的文件路徑方便調(diào)試，其他環(huán)境中會                      使用hash值封裝
                    localIdentName: process.env.NODE_ENV === 'development' ? '[path][name]__[local]' :                          '[hash:base62:8]',
                }
            }
        }
    }
}

需要知道的是，這兩個解決方案都不是CSS的官方規(guī)范，只是我們通過一些構(gòu)建工具，比如Webpack或者腳手架來加載對應(yīng)的Loader，從而對CSS代碼進(jìn)行一些轉(zhuǎn)換，來做到實現(xiàn)模塊化的效果。

CSS Modules

原理

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

轉(zhuǎn)化前

<style module>
.example {
  color: red;
}
</style>
?
<template>
  <div class="example">hi</div>
</template>

轉(zhuǎn)化后

<!-- 轉(zhuǎn)化規(guī)則是自己定義的 -->
<!-- 生產(chǎn)環(huán)境中，直接用hash值封裝 -->
<style module>
._1TdbN_VT {
  color: red;
}
</style>
?
<template>
  <div class="._1TdbN_VT">hi</div>
</template>
?
<!-- 開發(fā)環(huán)境中，會顯示來源 -->
<style module>
.src-views-login-Index__example {
  color: red;
}
</style>
?
<template>
  <div class=".src-views-login-Index__example">hi</div>
</template>

規(guī)則

Vue項目中的使用

在style標(biāo)簽中需要聲明module特性：

<style module>
...
</style>

聲明module特性后，Vue Loader會生成一個$style計算屬性，向組件注入CSS Modules對象，我們可以通過使用該計算屬性在template和JS中訪問到CSS Modules對象。

<template>
    <!-- 直接通過$style來訪問red類，同理$style作為計算屬性也支持對象和數(shù)組語法 -->
  <p :class="$style.red">
    This should be red
  </p>
</template>

Composition：樣式的組合

.classA {
    color: green;
    background: red;
}
?
.classB {
    composes: classA;
    color: red;
}

使用composes規(guī)則可以把其他類和該類的樣式組合起來
要注意composes聲明的規(guī)則必須在自身規(guī)則之前；

可以一次性組合多個class，類名之間用空格隔開，但是這些class都必須是local scoped的

Dependencies：通過導(dǎo)入實現(xiàn)依賴

如果需要組合其他module里的樣式，可以通過導(dǎo)入的方式：

.classC {
    composes: classA from './style.css'
}

要注意當(dāng)組合了不同CSS文件中的不同類時，CSS Modules是默認(rèn)這些類之間不存在先后順序的，因此導(dǎo)入時要保證這些類之間沒有規(guī)則沖突
組合的類之間不能存在循環(huán)依賴
composes實現(xiàn)的原理就是通過loader把import的CSS文件處理成ICSS格式的中間件，導(dǎo)出一個保存了所有l(wèi)ocal類名到global類名映射的對象，實際上這也是在JS文件中直接import CSS文件的原理

:global選擇器

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

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

Vue3新特性

自定義module命名

<style module="login">
...
</style>

支持給module命名，可以用module名替代$style，比如<div :class="login.red"></div>。

組合式API中的CSS Modules

在setup()中可以使用useCssModuleAPI來獲取module對象。

在CSS中使用v-bind

支持在style中把某條rule的值和data中的一個數(shù)據(jù)綁定，比如：

.red {
    color: v-bind(color);
}

Scoped CSS

原理

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

轉(zhuǎn)化前

<style module>
.example {
  color: red;
}
</style>
?
<template>
  <div class="example">hi</div>
</template>

轉(zhuǎn)化后

<!-- 用自定義屬性把類名封裝起來了 -->
<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>
?
<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

規(guī)則

一個Vue文件中可以同時存在global和scoped的樣式，即允許聲明兩個style標(biāo)簽。

<style>
/* global styles */
</style>
?
<style scoped>
/* local styles */
</style>

使用Scoped CSS以后，因為樣式具有了作用域，所以父組件的樣式是不會影響到子組件的，即父組件和子組件的樣式都具有自己的作用域。

但是對于子組件的根元素來說，其樣式還是可以受父組件控制的，使得父組件可以控制布局。
注意通過v-html創(chuàng)建的DOM內(nèi)容是不受Scoped CSS控制的，如果希望修改其中的樣式，可以通過深度作用選擇器。
因為Scoped CSS是通過屬性選擇器實現(xiàn)的，所以最好不要和標(biāo)簽選擇器混用，會產(chǎn)生性能問題。

深度作用選擇器

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

/* 轉(zhuǎn)化前 */
<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>
?
/* 轉(zhuǎn)化后 */
.a[data-v-f3f3eg9] .b {
  /* ... */
}

需要注意深度作用選擇器和聲明為global樣式的區(qū)別，深度作用選擇器只是為了能讓父組件控制子組件樣式，而global樣式是全局起效的。
實際項目中，當(dāng)我們希望修改所使用組件庫的默認(rèn)樣式時，在使用Scoped CSS方案的情況下，就可以通過深度作用選擇器來修改其默認(rèn)樣式。
幾種深度左右選擇器的寫法：
- /deep/：已廢棄
- >>>：在不使用Sass預(yù)處理器時可以使用
- ::v-deep：使用Sass預(yù)處理器時使用

Vue3新特性

深度作用選擇器

廢棄/deep和>>>，使用:deep(.child-class)來替代::v-deep
:slotted()選擇器

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

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

二者的比較

CSS Modules	Scoped CSS
需要在vue.config.js中額外配置	Vue Loader默認(rèn)支持，無需額外配置
通過根據(jù)配置的類命名規(guī)則，為元素生成獨一無二的類名來實現(xiàn)作用域隔離	通過給元素自定義hash屬性，再使用屬性選擇器選中元素來實現(xiàn)作用域隔離
在style標(biāo)簽中聲明module	在style標(biāo)簽中聲明scoped
支持導(dǎo)入其他module的樣式，支持樣式組合	/
通過:global()來解除作用域的隔離，使樣式在全局生效	1. 可以定義全局樣式，使樣式不受作用域約束；2. 可以通過深度作用選擇器命中子組件，從而控制子組件的樣式

總結(jié)

到此這篇關(guān)于Vue項目中CSS Modules和Scoped CSS的介紹與區(qū)別的文章就介紹到這了,更多相關(guān)Vue中CSS Modules和Scoped CSS內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: