Vue.js 如何在Vue组件中@扩展外部CSS类？

例如，如果我的组件中有类似的内容：

<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>

---

我的风格块，但这似乎不做的把戏在这里。另外，这不会导致每个导入CSS的组件都重复使用CSS吗？

使用其他类似样式导入文件

---

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

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

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。

简而言之，您不能通过导入普通的

*.css

文件来扩展

*.scss

文件中的css类。Scss编译器将抛出错误

SassError:未找到目标选择器

简单的方法是将引用的*.css文件重命名为*.scss。所以结果就像

@import'path/to/orange.scss'

src/styles/style.scss

.my_class_to_extend {
  backgroud-color: aqua;
}

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

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