VUE SPA应用，每个页面组件单独引了自己的CSS，页面跳转后，CSS不销毁导致样式冲突

Question

我们这边的前端做了个单页面应用，用vue+webpack做的，然后现在出个一个问题：
就是每个页面单独引了自己的CSS，然后我现在就从A面到B页面之后，再Chrome的F12中还能看到A页面的CSS还残留着，返回A页面后，B的CSS也在，相当于跳的页面越多CSS叠加的越多，因为前期没注意，所以中间有一些class名字冲突了，导致样式冲突出问题了，不知道各位有没有遇到过这个问题，想问能不能每个页面只加载自己引用CSS的，跳转后让前一个页面的销毁?

Answer 1

用webpack处理CSS的时候，对CSS的设计是有要求的

1. 与加载顺序无关

2. 相互不影响

Scoped是一种方式，但是并不能解决所有问题，比如v-html中的就不在scope中，<slot>的支持也只有2.0的loader才支持。而且scoped方式是Vue特有，如果你使用其他框架，就得另寻方式了。

所以，最好是做好的CSS设计，参考一些CSS组织方式：BEM SMACSS

Answer 2

如果是 .vue 后缀的组件，可以在 style 标签上加一个无值属性 scoped，

像这样

<style scoped>
...
</style>

Answer 3

是的,加scoped就能解决

Answer 4

你可以把公用的样式单独写一个文件在main.js引进来，是每个页面都要用到的。然后在组件内就用scoped。我也发现这个问题了，正在探索。

Answer 5

https://www.zhihu.com/questio...