解決 CSS 困境的 scoped style

在使用Vue Cli開發時，Vue是將每個組件(副檔名.vue)拆封成HTML、CSS、JavaScript三個部分，也就是如下：

<template>
    //這裡寫HTML
</template>


<script>
    //這裡寫JavaScript
</script>

<style>
    //這裡寫CSS
</style>

但這樣就產生了一個問題，假如我在a.vue檔(a組件)寫了一段CSS

<style>
  h2 {
      color:red;
  }
</style>

b.vue檔(b組件)、c.vue檔(c組件)...etc組件，只要有用到 <h2> 標籤，h2標籤就會變成紅色，理由是我們在a組件的CSS設定了 <h2> 是紅色的樣式。

因為 CSS 是 global scope 全域有效，css 原本沒辦法像 js 一樣設定作用域，這會導致不同組件的css樣式互相污染。

解決方法有，就多使用 CSS 的選擇器，然而一但組件和選擇器數量一多，那維護起來非常可怕。所幸Vue替我們解決了這個問題。

單一檔案組件的區域 CSS 樣式，我們可以把組件內的CSS樣式改成這樣

<style scoped>
  h2 {
      color:red;
  }
</style>

<style> 多增加了scoped
他可以幫我們把CSS的樣式固定在該組件裡，當我們npm bulid成靜態檔案時，組件之間的CSS就不會互相污染囉！