简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary

Home  >  Q&A  >  body text

javascript - 单页面、SPA、angular、router，如何解决css命名冲突的问题？

假如我的应用中的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应用都是如何避免这样的问题的？

PHPzPHPz2646 days ago694

reply all(5)I'll reply

  • 黄舟

    黄舟2017-04-10 16:40:23

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

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

    Reply
    0
  • 黄舟

    黄舟2017-04-10 16:40:23

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

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

    <body ng-class="{body_1: is_index_1, body_2: is_index_2}">
    ....
</body>

    Reply
    0
  • ringa_lee

    ringa_lee2017-04-10 16:40:23

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

    Reply
    0
  • 迷茫

    迷茫2017-04-10 16:40:23

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

    Reply
    0
  • 迷茫

    迷茫2017-04-10 16:40:23

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

    Reply
    0
  • CancelReply