Vue项目，局部组件复用样式重复引入打包出来是否会冗余

Question

比如说总共有3个父组件与10个子组件。

然后有6个组件是有表格的（不在同一个父组件下），
比方说有4个组件的样式是一样的，但展示的数据不一样的，对记录的操作也不同。

我把这些重复的组件样式提取出来然后在组件内引入（所有表格的类名是一样的）；
那我这个时候打包出来是否就会出现4个带scoped的表格样式。

如果是的话怎么把冗余的样式去掉呢？

webpack 有解决办法吗？
还是对相同的表格起一个单独的类名，然后在入口文件引入样式？

Answer 1

如果引用了公共的样式，但是没有加scoped，那么打包出来的css，就那一个样式；
如果引用了公共的样式，而且加了scoped，那么打包出来的css，会给每个组件对应的那个样式加个属性选择器，然后多个样式，共用一套样式内容，
比如

div[asdhfk],
div[asjdfj],
div[asiufn] {
  ....
}

所以不用担心冗余的问题。
另外就是，webpack不具备处理css的能力，准确来说，处理css是css-loader的活。

Answer 2

我是反对用 scoped 的，它带给我的麻烦比方便多。所以我这方面的经验不多。

不过我觉得可以试试，理论上，.vue 文件里的标签可以有多个：

<style scoped>
/* 这里放特定样式 */
</style>

<style>
/* 这里放通用样式 */
</style>