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

Posted 2023-02-22

【中文标题】我可以避免使用 Vue.js 组件的重复样式吗？

【英文标题】：Can I avoid duplicate styles with Vue.js components?

【发布时间】：2018-05-26 01:46:15

【问题描述】：

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

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

我担心的是：

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

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

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

【参考方案1】：

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

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

【讨论】：

啊，很高兴知道！如果我主要导入 .scss，那么它们将是完全重复的，所以似乎 cssnano 是关键。谢谢。

是的，当您为 Production（npm run build）构建应用程序时，cssnano 会删除重复项。但是，在开发模式下，您仍然会看到重复项。