欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3中使用scss加上scoped導(dǎo)致樣式失效問題

 更新時(shí)間:2022年10月10日 09:13:55   作者:tricolor_car  
這篇文章主要介紹了vue3中使用scss加上scoped導(dǎo)致樣式失效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

使用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ò),但是沒有用)
  • 在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 {
? ? }
? }

深度選擇器 Depth selector

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)簽就行了啊,千萬不要再加scoped了哈. 

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。 

相關(guān)文章

  • vue cli2.0單頁面title修改方法

    vue cli2.0單頁面title修改方法

    這篇文章主要介紹了vue cli2.0單頁面title修改方法,非常不錯(cuò),具有一定的參考借鑒,需要的朋友可以參考下
    2018-06-06
  • vue3+ts+echarts實(shí)現(xiàn)按需引入和類型界定方式

    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ā)布了新版本

    本文主要介紹了VUE項(xiàng)目自動(dòng)檢測(cè)服務(wù)端是否發(fā)布了新版本,通過輪詢方式檢測(cè)Vue項(xiàng)目新版本并提示用戶刷新頁面,具有一定的參考價(jià)值,感興趣的可以了解一下
    2025-01-01
  • vue+swiper實(shí)現(xiàn)時(shí)間軸效果

    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)前后端分離

    Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離

    這篇文章主要為大家詳細(xì)介紹了Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • Vue生命周期中的組件化你知道嗎

    Vue生命周期中的組件化你知道嗎

    這篇文章主要為大家詳細(xì)介紹了Vue生命周期中的組件化,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-03-03
  • 詳解Vue中的自定義指令

    詳解Vue中的自定義指令

    這篇文章主要介紹了Vue中的自定義指令的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)vue框架,感興趣的朋友可以了解下
    2020-12-12
  • vue實(shí)現(xiàn)兩個(gè)組件之間數(shù)據(jù)共享和修改操作

    vue實(shí)現(xiàn)兩個(gè)組件之間數(shù)據(jù)共享和修改操作

    這篇文章主要介紹了vue實(shí)現(xiàn)兩個(gè)組件之間數(shù)據(jù)共享和修改操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue數(shù)據(jù)變化但頁面刷新問題

    vue數(shù)據(jù)變化但頁面刷新問題

    這篇文章主要介紹了vue數(shù)據(jù)變化但頁面刷新問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue3.0基于views批量實(shí)現(xiàn)動(dòng)態(tài)路由的方法(示例代碼)

    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ù)在來createRouter,或者本地構(gòu)建使用routes.push來動(dòng)態(tài)構(gòu)建路由, 今天介紹一種新的方式來基于某個(gè)文件夾批量構(gòu)建動(dòng)態(tài)路由的方法,感興趣的朋友一起看看吧
    2024-12-12

最新評(píng)論