如何@extend Vue组件中的外部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';  

Answer 2

您可以通过以下方式执行此操作：

创建包含要扩展的类的文件：

src/styles/style.scss

.my_class_to_extend {
  backgroud-color: aqua;
}

在vue.config.js文件中，添加以下指向您的文件：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/style.scss";`
      }
    }
  }
}

之后，您可以在您的vue组件中扩展而不会出现问题：

...
<style lang="scss" scoped>
.my_extended_class {
  @extend .my_class_to_extend;
}

请注意，要使用它，您需要一直scss文件，而不是CSS。