Vue.js 在组件中包含分部会导致重复的css

我试图利用sass的

@extend

，这样我就不会将标记和html混合在一起。如中所述

简言之，不是写作

---

如果要将相同的CSS规则导入到不同的组件中，那么将在所有模块中复制相同的规则。这就是它的工作原理

您应该只导入定义抽象声明（如变量、混合、函数等）的模块，而不是实际的样式

唯一可以全局消除重复样式的方法是，如果您使用类似的方法来提取所有CSS并将其组合到单个文件中，然后通过类似的方法来运行它，这样会丢弃重复的规则（尽管对于范围受限的CSS，这可能不起作用）

模块通常是独立于其他模块构建的，并且没有一种简单的方法可以知道规则是否已经由前一个模块声明。在开发过程中，您可能会使用基于每个模块的操作，并根据需要将样式注入网页；如果某个特定的样式已经被另一个组件注入，它就无法确定应该注入哪些样式

它只是变得一团糟；首先不要复制样式，以保持简单

如果您真的想使用
@extend
，请创建一个单独的
.scss
文件，这是
@导入引导样式并在其中定义所有扩展名的唯一模块。
谢谢您的回答！关于导入只包含抽象声明的模块：问题是我找不到任何真正公开全功能占位符或混合的sass框架。如果您在bootstrap中查看
.btn
的实现，那里的代码太多，而不是简单的
@extend%btn
，因此我可以使用
%btn
。其他sass框架，比如Bulma和fomanticui，似乎也有同样的功能。