消息关闭
    暂无新消息!

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


5个回答

︿ 0

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

像这样

<style scoped>
...
</style>
︿ 0

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

  1. 加载顺序无关

  2. 相互不影响

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

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

︿ 0

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