客製化修改 Quasar Framework 元件樣式

最近在使用 Quasar CLI 開發專案，裡面有許多已經做好的元件可以使用，但是它所提供的元件是層層包裝好的，有些元件的 CSS 樣式甚至使用 important 還是難以覆寫或修改。這邊要介紹在 Quasar Framework 之中該如何強硬地修改 CSS 樣式，來客製化 Quasar 提供的元件。

客製化修改 Quasar 的 CSS 樣式

Quasar Framework 提供許多元件、Plugin，以及完善的樣式表，讓我們能完成各種想要的功能與頁面，完成後還能透過同一套程式碼打包出 SPA、SSR、PWA、Mobile App (Cordova)，或者 Electron App。

然而在使用 Quasar Framework 時，如果想要自訂 CSS 樣式，很可能會出現改不動的狀況！這個問題在其他框架之中也時常發生，像是 Element UI 與 Vuetify 等框架也都會有一樣的問題。

那麼我們該如何修改 Quasar 的 CSS 樣式呢？以下提供兩種做法，並且說明這兩種做法各自的優缺點。

不建議的做法：元件的 Style 不要使用 Scoped

通常我們在各個 Vue 元件裡面撰寫樣式時，會再加上 scoped 這個屬性，讓元件裡面的樣式只在該元件中生效，但是在 <style> 使用 scoped 屬性，可能會導致我們應用 Quasar Components 時無法加載到客製化修改的 CSS，然而只要將 scoped 移除掉就能吃到樣式了。

之所以會出現這個狀況，是因為 Quasar 元件並非只有最外面一層而已，有些元件會有許多子層，這些包裝好的子層通常是在頁面加載後才會出現的，又因為 scoped 預設只讓父層吃到樣式，所以就會出現子層沒有吃到樣式的情況哩。

所以我們只要把 scoped 屬性拿掉，不管是哪一層就都能吃到樣式了。

<style lang="scss">
  .el {
    background: $primary;
  }
</style>

這個方法的優點是不用做什麼更改，操作上相當快速，就只是把 scoped 拿掉而已，但是缺點卻也顯而易見，那就是這些 CSS 通通變成都會共用的，這樣會汙染到全域，可能會影響到其他元件，所以個人比較不建議使用這個方法。

推薦方法：深度作用選擇器

使用 vue-loader 的深度作用選擇器可以提升操作的權重，這麼做不但能影響到我們想要更改的子元件，同時也能保有 scoped 屬性，這樣一來就不會汙染全域了。

深度作用選擇器在 CSS 裡面是 >>>，不過 SASS/SCSS 無法解析 >>>，所以必須改成 /deep/ 才能使用。

<style lang="scss" scoped>
  .deep-button /deep/ .el {
    background: $primary;
  }
</style>

結論

其實使用 UI 框架前就應該與公司的 UI 討論過，如果 UI 喜歡客製化自己的風格，那麼打從一開始就不要使用 UI 框架會比較好。

以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫