首頁 > 文章 > web前端 > Vue內使用scoped css和css module差異有哪些

Vue內使用scoped css和css module差異有哪些

這次帶給大家Vue內使用scoped css和css module區別有哪些，Vue內使用scoped css和css module的注意事項有哪些，以下就是實戰案例，一起來看一下。

scoped css

官方文件

scoped css可以直接在能跑起來的vue專案中使用。

使用方法：

<style scoped>
h1 {
 color: #f00;
}
</style>

使用scoped劃分本機樣式的結果編譯結果如下：

h1[data-v-4c3b6c1c] {
 color: #f00;
}

即在元素中加入了一個唯一屬性用來區分。

缺點

一、如果使用者在別處定義了相同的類別名，也許還是會影響到元件的樣式。

二、根據css樣式優先權的特性，scoped這種處理會造成每個樣式的權重加重了：

即理論上我們要去修改這個樣式，需要更高的權重來覆蓋這個樣式。

所以在引用包含scoped的第三方外掛程式時如若需要修改樣式則需要全域修改，而且要注意權重問題，0.0迫不得已再使用!important。

三、如果元件內部包含有其他元件，只會給其他元件的最外層標籤加上目前元件的data屬性：

所以一般父元件如果加了scoped，會比已經設定過自己樣式的子元件內除最外層標籤的內層標籤的權重低，影響不到他們的樣式。

不過也是可以透過以下方法影響的：

#四、scoped會使標籤選擇器渲染變慢很多倍

官方給了一些注意事項如下：

#我們可以看到scoped用標籤選擇器時會嚴重降低效能，而使用class或id則不會。

css module

官方文件

css module需要增加css-loader配置才能生效，具體可看文檔的實現。

注意

如果你使用的是style-loader，如果想讓設定生效需要更換到文件所述的vue-style- loader。

二者差異可以從這裡了找vue-style-loader

使用如下：

<template>
 <p :class="$style.gray">
 Im gray
 </p>
</template>
<style module>
.gray {
 color: gray;
}
</style>

使用module的結果編譯如下：

<p class="gray_3FI3s6uz">Im gray</p>
.gray_3FI3s6uz {
 color: gray;
}

由此可見，css module直接替換了類別名，排除了使用者設定類別名稱影響元件樣式的可能性。

這樣$style.red就可以當做一個變量，並且可以在js中使用，如下：

<script>
export default {
 created () {
 console.log(this.$style.gray)
 // -> "gray_3FI3s6uz"
 // 一个基于文件名和类名生成的标识符
 }
}
</script>

我們可以看到，module在使用時多出了綁定和$style ，如果你想更優雅，可以看這個vue-css-modules。

使用css module在keyframes中的問題

#使用CSS modules處理動畫animation的關鍵影格keyframes，動畫名稱必須先寫。

animation: ani 1s;能正常編譯，而animation: 1s ani;則會編譯的不符合預期，所以平時養成良好的css參數書寫順序也很重要。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！