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”无法扩展“ .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。

Answer 3

简而言之，您无法通过导入普通*.scss文件来扩展*.css文件中的CSS类。 Scss编译器将引发错误SassError: The target selector was not found。

简单的方法是将引用的* .css文件重命名为* .scss。因此结果就像@import 'path/to/orange.scss'

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

3 个答案: