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