vue style设置了scoped lang="scss"属性 .ant-form .ant-form-item .ant-select-selection { width: 150px; }无效
时间: 2024-02-17 10:00:00 浏览: 120
.vue文件 加scoped 样式不起作用的解决方法
如果你在 Vue 中使用了 `lang="scss"` 属性来使用 SCSS 预处理器,那么你需要注意样式选择器的书写方式。
在 SCSS 中,使用 `&` 符号可以引用当前选择器的父级选择器,从而形成更加具体的选择器。因此,你可以尝试使用以下方式来书写样式:
```
<style scoped lang="scss">
.ant-form {
.ant-form-item {
.ant-select {
&.ant-select-selection {
width: 150px;
}
}
}
}
</style>
```
这段样式中,我们使用了 `&` 符号来引用父级选择器,从而得到更加具体的选择器,从而提高了样式的权重。
阅读全文