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

Question

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

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

我担心的是：

如果我在多个组件中始终使用相同的样式定义，这些样式定义是否会在已编译的CSS中重复？

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

我希望这是有道理的！这里只需要更多说明即可。

Answer 1

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

笔记; 只有完全重复的才会被丢弃。