不同父页面的不同样式表

Question

我正在努力调整我的 Angular JS 应用程序。

最后我想在整个应用程序中使用我的app.css 文件作为样式表。所以每个状态都像：

• domain/#/articles
• domain/#/articles/1
• domain/#/users
• domain/#/users/1

将使用此文件。

但是我的应用程序中确实有一个 cms 部分（即domain/#/cms/articles，我想在那里使用完全不同的样式（与app.css 没有共同之处）。我可以做些什么来轻松加载@987654329 @ 用于选定的状态并且不在那里加载app.css？

我最初的想法是在我的index.html 文件中添加两个样式表，每个样式表都带有ng-if 或ng-show，但这绝对不是一个好方法（很可能它甚至都行不通）。

Answer 1

如何为每个页面分配一个顶级类，然后在其中嵌套该页面独有的样式？如果您使用的是 LESS 或 SASS 之类的 CSS 预处理器，这将变得更加简单。

例如，你会有这样的东西：

<div class='main-page' ng-controller='main'>
    <p>Some text</p>
    <p>Some more text</p>
</div>

<div class='cms-page' ng-controller='cms'>
    <p>Some CMS text</p>
    <p>Some more CMS text</p>
</div>

然后在你的 CSS 中：

.main-page {
//main styles here
    background-color: black;

    p {
        color: white;
    }
}

.cms-page {
//cms styles here
    background-color: red;

    p {
        color: blue;
    }
}

根据需要推断该想法，但现在您不必担心重用类名或使一个页面上的样式与另一个页面上的样式冲突，因为所有内容都安全地嵌套在其页面类中。

当然，对于全局样式，您只需将它们排除在顶级页面类之外。