Vue Element-ui 全局變數

和 Vue 配合最多的 ui 框架就是 element-ui 了，element-ui 有一套屬於自己的樣式。

而往往我們的 ui 同學會發揮自己的能力設計出或簡潔或樸實或炫麗各種各樣的設計稿，我們前端的工作就是實現它，儘可能還原到100%。

但是 ui 同學設計的和 element-ui 的默認樣式存在些許差別，我們怎麼修改呢？

說到這就到提及一點，每個 vue 組件內的 style 標籤都會有一個 scoped 屬性，它的作用就是讓樣式作用於當下的模塊，不會影響其他模塊同名的樣式【舉例：A組件有個名為cla的類，B組件也有一個cla的類，如果不加scoped，改變A的cla，B組件樣式也會跟隨變化。加上就不會跟隨變化了】。

回到正題，我們用 button 舉例。我們先看下 element-ui 的 button 樣式

長得還挺漂亮的哈，如果 ui 同學給我們的設計稿所有按鈕都是長方形非圓角的（類似第一種），我們需要每個按鈕都要修改嗎？顯然不是

在 element-ui 的自定義主題中給我們提供了方法，雖然提供了方法，但是具體到修改某些樣式的代碼我們還是不清楚怎麼寫。

1）. 首先 npm 安裝 element-ui 的依賴，然後在 main.js 中引入，並加上這個scss

2）. 找到 element 的默認配置 css 的文件，從中查看哪些變數可以修改，及修改的具體代碼

node_modules / element-ui / packages / theme-chalk / src / common / var.scss

3）. 找到我們想修改內容的代碼，複製到你新建的 element-variables.scss 中

這樣就能批量修改你想改變的樣式了，而且不影響你組件內 scoped 的代碼。

看到這裡有人疑問了，它文件的 !default 是幹什麼的？ 這個東西是默認使用，如果你有修改就會覆蓋掉它的默認，需要注意一點：要寫在 紅框代碼 的上面才起作用。

這樣就解決了批量的問題了，大功告成~

別高興太早，有些頁面是特殊化定製的樣式，舉例：所有頁面的 button 都是非圓角，但是只有 A 組件的 button 要求5px 的圓角，怎麼辦？

有三種方法實現：

1）. 你剛才新建的 element-variables.scss 是一個全局的 scss 文件，你可以寫在這裡。但是不推薦，因為是全局文件，裡面最好還是寫一些全局的樣式，如果有單獨的有全局的很亂

2）. 我們知道每個 vue 組件內是可以寫多個 style 標籤的，那我們寫兩個，單獨定製的 css 寫在加 scoped 的 style 內，全局的寫在不加 scoped 的 style 中也是可以實現的，但是也不太推薦，這樣會引起全局污染互相影響。

3）. 使用 深度選擇器，這樣我們就能在組件內直接修改了，既不會引起全局污染也不會混亂。

深度選擇器如何使用呢？

這個就是深度選擇器的用法【.a >>> .b{} ： 注意三個箭頭左右各有一個空格】

如果你的 css 語言使用的是 scss、less 或 stylus 等就這樣寫【.a /deep/ .b{}】

有的時候你使用了深度選擇器但是樣式還是沒有修改，可能是權重的問題，加 !important 就好了【！前面要有空格，英文嘆號】

我們無法直接在帶有 scoped 的組件中直接修改第三方 ui 庫的默認樣式。

我們有時 F12 檢查的時候發現有的樣式比較奇怪，長這個樣子

這個 [data-v-b554e15c] 這個是幹嘛的？這個是 scoped 機制自動給類添加的，保證了唯一性，防止全局污染。這就是為什麼你在不同組件起了個相同的名字也不會相互影響的原因。

感覺不錯點個贊留個關注吧。都是實戰經驗的乾貨哦~

你之前碰到這種問題是怎麼樣解決的呢？或者有什麼更好的方法，歡迎評論，一起交流進步~

推薦閱讀：