客製化修改 Quasar Framework 的 CSS 樣式

最近公司使用 Quasar CLI 來開發專案,裡面有許多組件可以使用,而組件的 API 雖然有提供修改基本樣式的方法,但是難免還是會有需要自己修改樣式的時候。
然而,多數的 UI Framework 提供的組件都是層層包裝好的,有些組件的 CSS 樣式甚至會使用 !important 來製作,導致我們難以覆寫或修改,所以在這邊就要介紹在 Quasar Framework 之中該如何修改 CSS 樣式,來客製化 Quasar 提供的組件。

Quasar Framework

客製化修改 Quasar 的 CSS 樣式

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

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

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

方法一:元件的 Style 不要使用 Scoped

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

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

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

1
2
3
4
5
<style lang="scss">
.el{
background: $primary;
}
</style>

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

方法二:深度作用選擇器

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

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

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

不過 /deep/ 這種覆寫 CSS 的方式,或許在效能上會有所影響也說不定。
此外,Google Chrome 2017 年的更新日誌中,有出現過 Chrome 63 將刪除::shadow 和 /deep/ 的消息,但是這是 shadow-dom/deep/,與 vue-loader 的 /deep/ 是不同的東西。

參考資料

  1. 如何在 Vue 裡面使用 Element-ui 並修改 CSS 樣式呢? - I am Mike - Medium

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