vue3中使用scss加上scoped導(dǎo)致樣式失效問(wèn)題
使用scss加上scoped導(dǎo)致樣式失效
在vue3 中給style標(biāo)簽加上scoped 的時(shí)候自定義第三方ui框架樣式不生效的解決方案
給樣式加上 /deep/ >>> 或 ::v-deep
.ant-layout-header {
? .ant-menu::v-deep .ant-menu-item-selected {
? ? background-color: #fff;
? }
}注意事項(xiàng)
- 在 scss中不支持使用 /deep/ (會(huì)報(bào)錯(cuò))
- 在 scss中使用 >>>不生效 (不報(bào)錯(cuò),但是沒(méi)有用)
- 在scss中可以使用::v-deep
在vue3 + vite 中使用 :: v-deep 拋出警告
:v-deep usage as a combinator has been deprecated. Use :deep() instead.
解決辦法 使用 :deep()
? :deep(.ant-menu) {
? ? .ant-menu-item-selected {
? ? }
? ? .ant-menu-item:hover {
? ? }
? ? &.ant-menu-dark {
? ? }
? }vue中加樣式失效,scoped穿透你需要了解一下
1.什么是scoped
在Vue文件中的style標(biāo)簽上有一個(gè)特殊的屬性，scoped。
當(dāng)一個(gè)style標(biāo)簽擁有scoped屬性時(shí)候，它的css樣式只能用于當(dāng)前的Vue組件，可以使組件的樣式不相互污染。
如果一個(gè)項(xiàng)目的所有style標(biāo)簽都加上了scoped屬性，相當(dāng)于實(shí)現(xiàn)了樣式的模塊化。
2.scoped穿透
scss的樣式穿透,在樣式的選擇器前加上 /deep/
<style lang="scss" scoped>
? ? /deep/.el-scrollbar__wrap{
? ? ? ? overflow-x: hidden;
? ? }
</style>3.另一種方式實(shí)現(xiàn)穿透的效果
<style lang="scss">
? ? .el-scrollbar__wrap{
? ? ? ? overflow-x: hidden;
? ? }
</style>直接另寫一個(gè)<style></style>標(biāo)簽就行了啊,千萬(wàn)不要再加scoped了哈.
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue cli2.0單頁(yè)面title修改方法，非常不錯(cuò)，具有一定的參考借鑒,需要的朋友可以參考下2018-06-06
vue3+ts+echarts實(shí)現(xiàn)按需引入和類型界定方式
這篇文章主要介紹了vue3+ts+echarts實(shí)現(xiàn)按需引入和類型界定方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
VUE項(xiàng)目自動(dòng)檢測(cè)服務(wù)端是否發(fā)布了新版本
本文主要介紹了VUE項(xiàng)目自動(dòng)檢測(cè)服務(wù)端是否發(fā)布了新版本,通過(guò)輪詢方式檢測(cè)Vue項(xiàng)目新版本并提示用戶刷新頁(yè)面,具有一定的參考價(jià)值,感興趣的可以了解一下2025-01-01
vue+swiper實(shí)現(xiàn)時(shí)間軸效果
這篇文章主要為大家詳細(xì)介紹了vue+swiper實(shí)現(xiàn)時(shí)間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離
這篇文章主要為大家詳細(xì)介紹了Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要為大家詳細(xì)介紹了Vue生命周期中的組件化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
這篇文章主要介紹了Vue中的自定義指令的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-12-12
vue實(shí)現(xiàn)兩個(gè)組件之間數(shù)據(jù)共享和修改操作
這篇文章主要介紹了vue實(shí)現(xiàn)兩個(gè)組件之間數(shù)據(jù)共享和修改操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue數(shù)據(jù)變化但頁(yè)面刷新問(wèn)題
這篇文章主要介紹了vue數(shù)據(jù)變化但頁(yè)面刷新問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3.0基于views批量實(shí)現(xiàn)動(dòng)態(tài)路由的方法(示例代碼)
以前vue項(xiàng)目中也有很多實(shí)現(xiàn)動(dòng)態(tài)路由的方法,比如有一些項(xiàng)目涉及權(quán)限的可能會(huì)使用api請(qǐng)求路由數(shù)據(jù)在來(lái)createRouter,或者本地構(gòu)建使用routes.push來(lái)動(dòng)態(tài)構(gòu)建路由, 今天介紹一種新的方式來(lái)基于某個(gè)文件夾批量構(gòu)建動(dòng)態(tài)路由的方法,感興趣的朋友一起看看吧2024-12-12