用Dart Sass 替換 Node Sass

最近在看vue-element-admin項目文檔的時候發現有個叫Dart Sass的東西，這東西可以替換之前我經常的Node Sass，曾幾何我們在很痛苦的裝Node Sass，現在我們是時候跟Node Sass說在再見了。具體內容請大家查看 Node Sass to Dart Sass

升級教程

yarn remove node-sass

yarn add sass -D

在上文提到的文檔教程中提到：在替換完Node Sass后，需要用::v-deep代替/deep/和>>> (注:如果在css中直接這么寫是沒用作用的) 來進行樣式穿透。最重要原因是 vue 3.0 RFC中指定的寫法，我們這么寫之后可以盡量的最大程度減少升級到Vue3的復雜度。

.a {
  >>> {
    .b {
      color: red;
    }
  }
}

/* 或者 */

.a {
  /deep/ {
    .b {
      color: red;
    }
  }
}

/* 修改為 */
.a {
  ::v-deep {
    .b {
      color: red;
    }
  }
}

不過我在讀完 vue 3.0 RFC后發現，其實更推薦下面的寫法

/* DEPRECATED */
::v-deep .bar {}

/* 用偽元素寫法傳入一個css選擇器作為參數 */
::v-deep(.bar) {}

/* 上邊的寫法會編譯為下邊的樣子 */
[v-data-xxxxxxx] .bar {}

此外還有兩種scope css寫法：
在 <style scoped> 代碼快中使用 ::v-global()， 在這代碼塊中是全局范圍

::v-global(.foo) {}

/* 被編譯為 */
.foo {}

專門修改slot插槽中元素的樣式,你在子組件中修改插槽中樣式是沒用的，因為傳入組件的插槽內容輸入父組件，而Scoped styling是在編譯時確定的,我們在子組件中可以這么寫

::v-slotted(.foo) {}

/* 編譯為 */
.foo[v-data-xxxxxxx-s] {}

注意-s（感覺像是slot的縮寫）后綴，這表明這個樣式只針對於slot中的內容

參考資料

• Vue3教程，搶先學習