我可以避免使用 Vue.js 组件的重复样式吗？

Question

我是 Vue 的新手（以及单文件组件的概念），不确定在生成我的应用程序时 CSS 是如何编译的。

我有一个模式库，其中为我的项目编译了所有 SCSS，因此我想将其拉入我的组件中。我知道我可以全局加载 mixins 和变量，然后如果需要使用其他 sass 块来设置该组件的样式，我打算挑选它们。

我担心的是：

如果我在多个组件中继续使用相同的样式定义，这些样式会在编译后的 css 中重复吗？

如果是这样。怎么能避免呢？例如： 我在 10 个组件中导入了“headings.scss”。编译后的 CSS 中会有 10 个“headings.scss”文件的实例吗？

我希望这是有道理的！只是需要在这里更清楚一些。

Answer 1

是的，会有重复。但是，如果您使用 vuejs webpack 模板，则生产构建的 css 由 cssnano 处理，这将丢弃重复的 css

注意；只会丢弃完全相同的重复项。