解決vue 單文件組件中樣式加載問(wèn)題
在寫(xiě)單文件組件時(shí)，一般都是把標(biāo)簽、腳本、樣式寫(xiě)到一起，這樣寫(xiě)個(gè)人感覺(jué)有點(diǎn)不夠簡(jiǎn)潔，所以就想著把樣式分離出去。
采用import加載樣式
在局部作用域（scoped）采用@import加載進(jìn)來(lái)的樣式文件，想法是美好的。以為這樣加載進(jìn)來(lái)的樣式文件也只對(duì)當(dāng)前組件有效；可現(xiàn)實(shí)是殘酷的，這樣加載進(jìn)來(lái)的樣式無(wú)法限制其作用域。
<style scoped> @import "樣式文件"; </style>
解決方案
采用 src屬性加載樣式。
<style src="樣式路徑" scoped></style>
PS：關(guān)于vue單文件組件中樣式的問(wèn)題
在寫(xiě)單文件組件的項(xiàng)目時(shí)，遇到過(guò)這樣的問(wèn)題。某一個(gè)樣式類(lèi)，明明我只寫(xiě)了兩個(gè)padding,但是在我用webpack構(gòu)建之后，莫名其妙的多出了很多其他的樣式。
后來(lái)，無(wú)意中看見(jiàn)別人的提問(wèn)中，說(shuō)如何解決單文件組件中樣式同名的問(wèn)題。
我就想，會(huì)不會(huì)是不同的.vue文件里使用了同名類(lèi)的原因。
于是，我在style標(biāo)簽后面加上了scoped這個(gè)關(guān)鍵字之后，再npm run build,果然好了。
原因：
不加scoped表示樣式是全局共享的。
加上了scoped就是這個(gè)樣式只能在這個(gè).vue文件里面有效。
總結(jié)
以上所述是小編給大家介紹的解決vue 單文件組件中樣式加載問(wèn)題,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
vue展示dicom文件醫(yī)療系統(tǒng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue展示dicom文件醫(yī)療系統(tǒng)的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒加載,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了MVVM 框架解析之雙向綁定,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
使用vue-virtual-scroller遇到的問(wèn)題及解決
這篇文章主要介紹了使用vue-virtual-scroller遇到的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vuex中store.commit和store.dispatch的區(qū)別及使用方法
這篇文章主要介紹了vuex中store.commit和store.dispatch的區(qū)別及使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue如何關(guān)閉eslint檢測(cè)(多種方法)
我們?cè)陂_(kāi)發(fā)vue項(xiàng)目的時(shí)候，創(chuàng)建的時(shí)候可能會(huì)不小心選擇了eslint，所以如果不想讓eslint檢測(cè)，我們?cè)撛趺崔k呢，本文就詳細(xì)的介紹了幾種關(guān)閉方法，感興趣的可以了解一下2021-12-12
Vue常用的三種傳值方式有:??父?jìng)髯??子傳父??非父子傳值?引用官網(wǎng)的一句話(huà):父子組件的關(guān)系可以總結(jié)為?prop?向下傳遞,事件向上傳遞,熟悉vue各類(lèi)關(guān)系的組件之間傳值方法會(huì)令開(kāi)發(fā)更加得心應(yīng)手,下面將對(duì)父子、兄弟、頁(yè)級(jí)組件之間的傳值作淺談2023-12-12
vue3.0中的watch偵聽(tīng)器實(shí)例詳解
雖然計(jì)算屬性在大多數(shù)情況下更合適,但有時(shí)也需要一個(gè)自定義的偵聽(tīng)器,這就是為什么Vue通過(guò)watch選項(xiàng)提供了一個(gè)更通用的方法,來(lái)響應(yīng)數(shù)據(jù)的變化,這篇文章主要給大家介紹了關(guān)于vue3.0中watch偵聽(tīng)器的相關(guān)資料,需要的朋友可以參考下2021-10-10
vue 解決無(wú)法對(duì)未定義的值,空值或基元值設(shè)置反應(yīng)屬性報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了vue 解決無(wú)法對(duì)未定義的值,空值或基元值設(shè)置反應(yīng)屬性報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue多頁(yè)面開(kāi)發(fā)和打包正確處理方法
這篇文章主要介紹了vue多頁(yè)面開(kāi)發(fā)和打包的正確處理方法，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了怎樣查看vue-cli的安裝位置問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03