javascript - 单页面、SPA、angular、router,如何解决css命名冲突的问题?
PHPz
PHPz 2017-04-10 16:38:23
0
5
777

假如我的应用中的css是按需加载的,有以下2个对应。

路由: /index
样式:index.css

body { background:red; }

路由: /index2
样式:index2.css

body { background:blue; }

如果我当前访问的是/index,那么背景是red的,然后切换到/index2,按需加载载入了index2.css,所以背景变成了blue

这个时候问题来了,如果我又切换回了/index,那么背景依然会是blue

请问在ui-router或者任何的spa应用都是如何避免这样的问题的?

PHPz
PHPz

学习是最好的投资!

reply all(5)
黄舟

最后针对angular,我使用了 angular-css 这个插件,配合ui-router这个能够实现我的需求。

切换了路由,会自动把对应的link去掉(看了下代码,是通过ng-repeat实现的),这样就无需担心冲突的问题了。

黄舟

这不是加载顺序的问题么,index2.css 是后加载的,覆盖了 index.css 中的样式。

为什么不用点儿什么东西区分一下呢,比如:

<body ng-class="{body_1: is_index_1, body_2: is_index_2}">
    ....
</body>
左手右手慢动作

试试css-modules,不知道是否适合你的场景。

迷茫

既然能动态加,为什么不能动态的删除咧
动态皮肤怎么弄的你就怎么整呗~~~

迷茫

你好,欢迎参考我的博客,
使用vue开发微信公众号下SPA站点的填坑之旅

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template