如何在 Vue 组件中 @extend 外部 CSS 类？

Question

例如，如果我的组件中有这样的内容：

<style lang="scss" scoped>
.color-blue {
  color: blue;
}

.orange-blue {
  @extend .color-blue; // This works!
  @extend .bg-orange; // .bg-orange is defined in another css file somewhere. This doens't work
}
</style>

我收到一条错误消息

“.orange-blue”无法@extend“.bg-orange”。

找不到选择器“.bg-orange”。

我读过我可以添加

@import 'path/to/orange.css'

到我的风格块，但这似乎并不能解决问题。另外，这不会导致每个导入它的组件都重复 CSS 吗？

Answer 1

导入具有类似其他样式的文件

<style lang="scss" scoped>  
 @import '~styles/mixins';  

... 

</style>

或使用通常的路径

@import '../../../styles/mixins';