vue.js - 如何在 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" failed to @extend ".bg-orange".

The selector ".bg-orange" was not found.

我读过我可以添加

@import 'path/to/orange.css'

到我的样式块，但这在这里似乎不起作用。另外，这不会导致每个导入它的组件都重复使用 CSS 吗？

Answer 1

使用其他样式导入文件

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

... 

</style>

或使用通常的路径

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