vue 修改第三方樣式庫並不影響別的頁面

原文鏈接 https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html?q=

以下介紹比較囉嗦，大家如果不想看可以直接跳到官方文檔↑↑↑

1.需要場景

當 在vue中 style 標籤有 scoped 屬性時，它的 CSS 只作用於當前組件中的元素，防止樣式的全局污染，尤其是在我們引用第三方庫的，可能它們沒有達到我們的要求，我們需要去修改第三方的樣式，如果我們不加scoped的時候可能在別的頁面也會修改我們的樣式。

2.解決方案

• 方法1(需要大量修改樣式)：
  我們知道在一個vue的頁面中，可以使用多個style標籤來設置多個樣式，我們將第一個樣式設置爲scoped，然後在寫一個樣式來使用修改第三方的樣式，如圖：
  
  但是這樣我們需要注意的問題是，要將樣式包住，每個頁面都有有一個不同的大的類名，如a.vue 頁面我們設置.containerA{ }，b.vue { } 頁面我們設置類名.cintainerB{ } 這樣防止我們的樣式在別的頁面污染，如果所有頁面都需要修改的話，那麼我們直接見一個全局的文件，將css樣式寫在全局文件中
  這樣寫的的時候可以將樣式設置到整個項目中的所有文件：
  
  
  可以看到home和about中的樣式都修改了。

  方法2(不需要大量修改樣式並沒有使用css樣式處理器)：
  如果我們沒有大量的樣式修改樣式的時候，並且沒有使用scss，stylus，less預處理器的時候，那麼我們可以使用>>>這個符號來全局設置類，但是樣式只能穿透到它的子組件中，我下面來demo讓大家看的更詳細一些
  

所以只是父組件中的樣式改變了，而子組件的樣式中的樣式並沒有改變。

加上>>>後：


我們可以看到樣式直接設置到子組件的類名上了，但是當我們使用了css預處理器後>>>
這個就不會管用了


可能是處理器解析不出來>>>這個符號吧~

方法3(不需要大量修改樣式並使用了css樣式處理器)：
它跟方法2是一樣的，也是隻是在將樣式設置到子組件下 只需要將>>>修改爲/deep/