在vue项目开发中有可能会碰到写在scss
中样式不会执行,这是我们会用到深度选择器/deep/
,下面web建站小编给大家详细介绍一下具体实现代码!
deep正确写法:
/deep/的用法:
<style scoped> .menu{ /deep/ .li { //.... } } </style>
::v-deep的用法:
<style scoped> .menu{ ::v-deep .li { //.... } } </style>
PS:如果/deep/
在vue-cli3编译时,出现报错或者警告可以使用::v-deep
。
:deep()的用法:
<style> .menu{ :deep(.li){ //.... } } </style>
PS: :deep
在vue3中项目中使用~
/deep/深度选择器错误写法:
<style scoped> /deep/ .el-menu .el-menu-item { background-color: #000!important; } </style>
PS:>>>
是深度选择器,可以作用到子组件中的样式,/deep/
和::v-deep
都是>>>
的别名,在scss
中不识别/deep/
,因此报错*/
vuejs安装scss脚手架后使用lang=“scss“出现的报错解决方法
上面是“scss中深度选择器/deep/的基本用法”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_4107.html
workflows工作流
- 水晶玉雕巨龙ComfyUI工作流
- 一张科幻照片,火星车在沙漠里ComfyUI工作流
- 树上挂着一只快乐香蕉ComfyUI工作流一
- 去掉背景(抠图)comfyui工作流
- 一个穿绿衣服国风古典女孩
- 一个纸杯蛋糕ComfyUI工作流
- 一只乌鸦栖息在一盏神灯上
- 一个巨大的漆黑的蟹王ComfyUI工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!