vue引入css全局樣式,vue引入公共樣式

vue+css實現(xiàn)夜間模式

最近項目中要求實現(xiàn)夜間模式，整理一下實現(xiàn)方法。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷、企業(yè)網(wǎng)站建設(shè)，外鏈，廣告投放為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計到用戶體驗提高，創(chuàng)新互聯(lián)力求做到盡善盡美。

ps. 我們的項目是混合開發(fā)，所以夜間模式要通過原生交互實現(xiàn)，如果直接是h5項目，則可省去原生交互這塊。

step1?原生交互方法

step2? 獲取模式方法

step3?實現(xiàn)方法

1、使用css大類區(qū)分

2、針對不同class類定義css屬性全局變量

3、全局引入樣式文件（main.js中引入）

4、頁面中可定義css私有變量（包含頁面中特殊的顏色屬性，不止涉及亮度更改的圖片）

變量定義規(guī)范：--（頁面名稱）-自定義

???建議將白天與夜間模式圖片區(qū)分兩個文件夾存儲

5、變量使用規(guī)范

總結(jié)：

1、注意css變量的使用的兼容性，例如安卓5的手機(jī)可能識別不了變量，解決方法：postcss可以試試看

2、如果項目中已使用less，可直接用less來實現(xiàn)，現(xiàn)未發(fā)現(xiàn)其兼容性問題（下一篇文章我會寫less實現(xiàn)夜間模式）

vuejs的組件化開發(fā)中，要怎么自定義class，覆蓋原有的css樣式

el-table-column并不是一個dom節(jié)點，所以infotext這個類究竟用在哪，需要看下el-table-column這個組件的實現(xiàn)才知道。

用了第三方組件的必然都會遇到你這樣的問題，我說下我的解決方法，不一定是好的。

一個vue文件可以寫多個style/style，加上socped代表本組件的樣式，不污染全局。如果需要覆蓋第三方組件樣式，則不能加scoped，因此需要另寫一個style.xxx-component{...}/style，這里用一個大類包裹防止污染全局。

接著，我用比較笨的方法(有好的方法請告知)，就是打開f12檢查究竟要覆蓋哪些樣式，然后寫在沒有加scoped的style里即可。

其實一些好的第三方UI庫都有提供自定義樣式的方法的，這樣實現(xiàn)起來才是最便捷的。

[img]

CSS 關(guān)于樣式穿透

前兩天在項目中遇到一個問題，需要手動去修改引入的第三方組件的CSS樣式，我第一想法就是直接在組件上新增一個自定義的class去覆蓋原有的樣式，結(jié)果當(dāng)然是行不通的（不然我現(xiàn)在也不會在這里寫這篇）。

于是我查了一下，是因為我在vue組件里面將設(shè)置成了局部樣式，局部樣式只在當(dāng)前組件生效，對引入的其他組件是無法起作用的。然后我試了一下，把 scoped 去掉就行了。

或者在組件里面寫多一份全局樣式

但是如果不在style里面寫 scoped ，直接寫成全局樣式，最后可能會面臨多個組件之間樣式污染的問題。如何使得局部樣式可以覆蓋到引入的第三方組件呢，我想到以前涉及過的一個名詞 樣式穿透 ，立刻實踐了一下，果然就成了。

樣式穿透 需要定義一個外層的style，通過 可以使得socped屬性下的的樣式穿透到全局， 外層 第三方組件 或者 外層 /deep/ 第三方組件 。 是 /deep/ 的別名，但是在sass之類的樣式預(yù)處理器之中無法正確解析。

Vue怎么局部引入css

vue只是一個js框架，和你引用css沒有太大的關(guān)系，和普通的js一樣的處理方式就好。

例如你可以新建一個link標(biāo)簽，然后插入到head標(biāo)簽下之類的。

網(wǎng)頁標(biāo)題：vue引入css全局樣式,vue引入公共樣式
文章鏈接：http://m.jiaotiyi.com/article/dsopicg.html