通过直接多层嵌套的scss无法设定child元素中的img的尺寸
1
2
3
4
5
6
7
8
9
10
| <script lang="scss" scope>
.parent {
.child {
img {
display: block;
width: 100%;
}
}
}
</script>
|
想着在css中可以使用>>>来深度查找元素，于是改成这样：
1
2
3
4
5
6
7
8
9
10
| <script lang="scss" scope>
.parent {
.child {
>>> img {
display: block;
width: 100%;
}
}
}
</script>
|
结果发现>>>直接导致scss编译报错，上网搜了一下在scss中可以使用/deep/来深度搜索元素，改成这样就能正常使用了。
1
2
3
4
5
6
7
8
9
10
| <script lang="scss" scope>
.parent {
.child {
/deep/ img {
display: block;
width: 100%;
}
}
}
</script>
|
注：在vue-cli3编译时，如果因为/deep/出现编译报错，可以把/deep/替换成::v-deep来解决
1
2
3
4
5
6
7
8
9
10
| <script lang="scss" scope>
.parent {
.child {
::v-deep img {
display: block;
width: 100%;
}
}
}
</script>
|
