vue中的css作用域

問題:大家可能在寫專案的時候經常看到

例如：建立一個元件foodNews，index

<template>
  <div class="container">
      <span class="title">為何房價！！！</span>
  </div> 
</template>
<style lang="scss">
   .container{
     width: 500px;
     height:500px;
      
   }
   .title{
       color:skyblue;
     }
</style>

<template>
  <div class="contain-wrap">
    <food-news></food-news>
     <span class="title">我是首頁的文字，測試style的modules</span>
  </div>
</template>
<style lang="scss">
 .title{
       color:purple;
     }
</style>

這樣如果不為元件的樣式設定私有樣式的話，那麼如果有相同的類名以及標籤樣式就會起衝突。因此我們在style標籤上新增scoped屬性，也可以在

但使用 scoped 後，父元件的樣式將不會滲透到子元件中。不過一個子元件的根節點會同時受其父元件有作用域的 CSS 和子元件有作用域的 CSS 的影響。並且如果想要修改子元件
樣式的話需要使用 >>> 操作符或者/deep/ 操作符

例如：

<style scoped>
.a >>> .b { /* ... */ }
</style>

使用CSS Modules設定css的作用域：

例如：

在你的 <style> 上新增 module 屬性：
<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

這將為 css-loader 開啟 CSS Modules 模式，生成的 CSS 物件將為元件注入一個名叫 $style 的計算屬性，你可以在你的模組中使用動態 class 繫結：

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

由於它是一個計算屬性，它也適用於 :class 的 object/array 語法：

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

你也可以在 JavaScript 訪問它：

<script>
export default {
  created () {
    console.log(this.$style.red)
    // -> "_1VyoJ-uZOjlOxP7jWUy19_0"
    // an identifier generated based on filename and className.
  }
}
</script>