css的scoped css和css module有哪些區別

這篇“css的scoped css和css module有哪些區別”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“css的scoped css和css module有哪些區別”文章吧。

一、css module

1.1.解釋
為所有類名重新生成類名，有效避開了css權重和類名重復的問題。css module直接替換了類名，排除了用戶設置類名影響組件樣式的可能性，這樣就不必為了命名絞盡腦汁。
1.2實現原理
通過給樣式名加hash字符串后綴的方式，實現特定作用域語境中的樣式編譯后的樣式在全局唯一。
1.3使用方法

• 在webpack.base.conf.js文件中，向 css-loader 傳入 modules: true 來開啟CSS Module。localIdentName 是設置生成樣式的命名規則。

//webpack.base.conf.jsmodule: {
    rules: [
      // ... 其它規則省略
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 開啟 CSS Modules
              modules: true,
              // 自定義生成的類名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }

• 在 < style >標簽添加 module 屬性

<style module>.red {
  color: red;}.bold {
  font-weight: bold;}</style>

• 在vue模板中通過一個動態類綁定來使用它

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

• 在js中使用

<script>export default {
  created () {
    console.log(this.$style.red)
    // -> "red_1VyoJ-uZ"
    // 一個基于文件名和類名生成的標識符
  }}</script>

1.4使用效果

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

編譯后結果：

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

1.5注意點

• 在處理動畫animation的關鍵幀keyframes，動畫名稱必須先寫。比如，animation: deni .5s,能正常編譯; animation: .5s deni, 則編譯異常

• 記得配置css-loader，否則不會生效。

• 若使用的是style-loader，則需配置更換為vue-style-loader才可生效。

• css modules如何解決權重問題？
  允許通過重命名或命名空間來封裝樣式規則，減少對選擇器的約束，從而達到不需要特定方法就可舒服的使用類名。
  當樣式規則耦合到每個組件時，當不再使用組件時，樣式也會被移除。

二、Scoped

2.1實現原理
vue通過在DOM結構以及css樣式上加唯一不重復的標記，以保證唯一，達到樣式私有化模塊化的目的。無法完全避開css權重和類名重復的問題。
2.2使用方法
在 < style >標簽添加 scoped屬性
2.3使用效果

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

編譯后結果：

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

2.4缺點

• 如果用戶在別處定義了相同的類名，也許還是會影響到組件的樣式。

• 根據css樣式優先級的特性，scoped這種處理會造成每個樣式的權重加重,引用 使用了scoped的組件
  作為子組件，修改子組件的樣式變得很難，可能迫不得已只能用！important

• scoped會使 標簽選擇器 渲染變慢很多倍，用標簽選擇器時scoped會嚴重降低性能，而使用class或id則不會

以上就是關于“css的scoped css和css module有哪些區別”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。