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

陟上晴明
  • 1.3k

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

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

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

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

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

回复
阅读 2.2k
2 个回答

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

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

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

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

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

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

<style>
/* 这里放通用样式 */
</style>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏