vue3 + dart-sass

[any86]

还没测试, 暂时记录

/* DEPRECATED */ ::v-deep .bar {}

/* 用伪元素写法传入一个css选择器作为参数 */ ::v-deep(.bar) {}

/* 上边的写法会编译为下边的样子 */ [v-data-xxxxxxx] .bar {} 此外还有两种scope css写法： 在

::v-global(.foo) {}

/* 被编译为 */ .foo {} 专门修改slot插槽中元素的样式,你在子组件中修改插槽中样式是没用的，因为传入组件的插槽内容输入父组件，而Scoped styling是在编译时确定的,我们在子组件中可以这么写

::v-slotted(.foo) {}

/* 编译为 */ .foo[v-data-xxxxxxx-s] {} 注意-s（感觉像是slot的缩写）后缀，这表明这个样式只针对于slot中的内容