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

Question

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

我有一个模式库，其中所有的 SCSS 都是为我的项目编译的，所以我想把它放到我的组件中。我知道我可以全局加载混合宏和变量，然后我打算在需要使用其他 sass block 来为该组件设置样式时精心挑选它们。

我担心的是:

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

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

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

Answer 1

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

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