快捷導(dǎo)航

sass 中使用 /deep/ 修改 elementUI 組件樣式報(bào)錯(cuò)的解決方案

更新時(shí)間：2024年02月19日 10:00:47 作者：程序員iteng

這篇文章主要介紹了sass 中使用 /deep/ 修改 elementUI 組件樣式報(bào)錯(cuò)的解決方案,嘗試用 ::v-deep 替換 /deep/ ,成功解決了問(wèn)題,感興趣的朋友跟隨小編一起看看吧

element plus 想要覆蓋組件的樣式，想到了/deep/樣式穿透，但樣式一直不生效，代碼如下：

<style scoped lang="sass">
.main_wrapper{
	padding: 0 53px
	position: relative
	top: -20px
}
>>> .el-tabs__item{
    height: 30px
    line-height: 30px
    color: #fff!important
}
</style>

上邊的寫法不會(huì)報(bào)錯(cuò)，但是也不會(huì)生效。改用下面的方式：

<style scoped lang="sass">
.main_wrapper{
	padding: 0 53px
	position: relative
	top: -20px
}
/deep/ .el-tabs__item{
    height: 30px
    line-height: 30px
    color: #fff!important
}

這樣就報(bào)錯(cuò)了，SassError: expected selector

解決方法：

嘗試用 ::v-deep 替換 /deep/ ，成功解決了問(wèn)題。

<style scoped lang="sass">
.main_wrapper{
	padding: 0 53px
	position: relative
	top: -20px
}
::v-deep(.el-tabs__item){
    height: 30px
    line-height: 30px
    color: #fff!important
}

到此這篇關(guān)于sass 中使用 /deep/ 修改 elementUI 組件樣式報(bào)錯(cuò)的文章就介紹到這了,更多相關(guān)sass 使用 /deep/ 報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

ES6新特性之解構(gòu)、參數(shù)、模塊和記號(hào)用法示例
這篇文章主要介紹了ES6新特性之解構(gòu)、參數(shù)、模塊和記號(hào)用法,結(jié)合實(shí)例形式分析了解構(gòu)、參數(shù)、模塊和記號(hào)的功能、用法及相關(guān)使用注意事項(xiàng),需要的朋友可以參考下
2017-04-04
屏蔽鼠標(biāo)右鍵、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格鍵
js 防止刷新網(wǎng)頁(yè)、禁止后退,右鍵等操作的代碼
2010-03-03
關(guān)于layui表單中按鈕自動(dòng)提交的解決方法
今天小編就為大家分享一篇關(guān)于layui表單中按鈕自動(dòng)提交的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
javascript間隔定時(shí)器(延時(shí)定時(shí)器)學(xué)習(xí) 間隔調(diào)用和延時(shí)調(diào)用
這篇文章主要介紹了javascript間隔調(diào)用和延時(shí)調(diào)用示例,介紹setInterval方法和clearInterval方法的使用方法，大家參考使用吧
2014-01-01
cropper.js和exif.js實(shí)現(xiàn)頭像上傳縮放裁剪旋轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了cropper.js和exif.js實(shí)現(xiàn)頭像上傳縮放裁剪旋轉(zhuǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
JavaScript實(shí)現(xiàn)多層深拷貝的簡(jiǎn)單方法
這篇文章主要為大家詳細(xì)介紹了JavaScript中實(shí)現(xiàn)多層深拷貝的幾個(gè)簡(jiǎn)單方法,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-07-07
IE瀏覽器打印的頁(yè)眉頁(yè)腳設(shè)置解決方法
IE瀏覽器打印的頁(yè)眉頁(yè)腳設(shè)置解決方法
2009-12-12
整理JavaScript創(chuàng)建對(duì)象的八種方法
JavaScript創(chuàng)建對(duì)象的方法有很多種，本文給大家介紹javascript創(chuàng)建對(duì)象的八種方法，對(duì)javascript創(chuàng)建對(duì)象感興趣的朋友可以參考下本篇文章
2015-11-11
JavaScript優(yōu)雅處理數(shù)組的幾個(gè)實(shí)用方法
這篇文章主要介紹了JavaScript優(yōu)雅處理數(shù)組的幾個(gè)實(shí)用方法,包括數(shù)組去重、扁平化、分組、查找、排序等,并提供了React和Vue3中的數(shù)組處理技巧,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-12-12
JS 實(shí)現(xiàn)百度搜索功能
這篇文章給大家介紹了js實(shí)現(xiàn)百度搜索功能，代碼分為html部分和css折疊樣式部分，具體實(shí)現(xiàn)代碼大家參考下本文
2018-02-02