2016-10-27 20:10发布
我们这边的前端做了个单页面应用，用vue+webpack做的，然后现在出个一个问题：就是每个页面单独引了自己的CSS，然后我现在就从A面到B页面之后，再Chrome的F12中还能看到A页面的CSS还残留着，返回A页面后，B的CSS也在，相当于跳的页面越多CSS叠加的越多，因为前期没注意，所以中间有一些class名字冲突了，导致样式冲突出问题了，不知道各位有没有遇到过这个问题，想问能不能每个页面只加载自己引用CSS的，跳转后让前一个页面的销毁?
像这样
是的,加scoped就能解决
https://www.zhihu.com/questio...
所以，最好是做好的CSS设计，参考一些CSS组织方式：BEM SMACSS
Scoped是一种方式，但是并不能解决所有问题，比如v-html中的就不在scope中，<slot>的支持也只有2.0的loader才支持。而且scoped方式是Vue特有，如果你使用其他框架，就得另寻方式了。
如果是 .vue 后缀的组件，可以在 style 标签上加一个无值属性 scoped，
你可以把公用的样式单独写一个文件在main.js引进来，是每个页面都要用到的。然后在组件内就用scoped。我也发现这个问题了，正在探索。
与加载顺序无关
用webpack处理CSS的时候，对CSS的设计是有要求的
相互不影响
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://wenda.whatsns.com/data/attach/logo/logo.png', '推荐 蜗牛食堂 的问题《VUE SPA应用，每个页面组件单独引了自己的CSS，页面跳转后，CSS不销毁导致样式冲突》','https://wenda.whatsns.com/q-303681.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
付费偷看金额在0.1-10元之间
像这样
是的,加scoped就能解决
https://www.zhihu.com/questio...
所以，最好是做好的CSS设计，参考一些CSS组织方式：BEM SMACSS
Scoped是一种方式，但是并不能解决所有问题，比如v-html中的就不在scope中，<slot>的支持也只有2.0的loader才支持。而且scoped方式是Vue特有，如果你使用其他框架，就得另寻方式了。
如果是 .vue 后缀的组件，可以在 style 标签上加一个无值属性 scoped，
你可以把公用的样式单独写一个文件在main.js引进来，是每个页面都要用到的。然后在组件内就用scoped。我也发现这个问题了，正在探索。
与加载顺序无关
用webpack处理CSS的时候，对CSS的设计是有要求的
相互不影响
一周热门 更多>