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

Question

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

我有一个模式库，其中所有 SCSS 都是为我的项目编译的，所以我想将其放入我的组件中。我知道我可以全局加载 mixin 和变量，然后我打算手工挑选 sass 的其他块，如果它们需要用于设置该组件的样式。

我担心的是：

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

如果是的话。如何避免这种情况？例如： 我在 10 个组件中导入 'headings.scss'。在编译的 CSS 中是否会有 10 个 'headings.scss' 文件的实例？

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

Answer 1

是的，会有重复。但是，如果您使用的是 vuejs webpack template the production build's css is processed by cssnano，它将丢弃重复的 css

注意； 只有完全相同的副本才会被丢弃。