ngdocs - 如何为现场演示示例添加样式答案

【问题标题】：ngdocs - how to add styles to live demo examplengdocs - 如何为现场演示示例添加样式
【发布时间】：2016-02-05 22:05:06
【问题描述】：

我想将我的 css 样式表添加到 ngdocs 文档中的实时演示示例中。

我希望样式影响演示本身，但显然，它们不应该影响整个网页。

我尝试将样式表添加到 gruntfile ngdocs 选项中，如下所示：

ngdocs: {
    options : {
        scripts: [
            ...
        ],
        styles: [
            '<%=base%>/mycss/mylayout.css'
        ],
        dest: '<%=target%>docs'
    },
    api : {
        src: [
            ...
        ]
    }
}

这确实将 mylayout.css 作为链接标记添加到 index.html 的标记中，作为 head 部分中最后包含的链接标记，但其中的样式会覆盖整个页面上的样式。不好。

我该怎么做才能使我的样式在现场演示中起作用，但在页面的其余部分不起作用？

感谢您的帮助！希望这将为 ng-docs 上非常有限的可用信息做出贡献！

编辑： 我最终做的是创建一个名为 myNgdocsLayout.css 的新 css 文件，我在其中编写了几个样式，覆盖了一些 mylayout.css，同时仍然允许 mylayout.css 样式适用于现场演示。

现在我的页面看起来不错，但这绝对不是一个完美的解决方案。如果有人能提出一个想法，让我的样式仅适用于我的现场演示，而不需要在页面的其余部分覆盖它们，我仍然会很感激......如果没有构建我会感到惊讶- 在 ngdocs 中这样做。

【问题讨论】：

您可以尝试使用此堆栈问题stackoverflow.com/questions/31719426/…中的解决方案@
嗨，Pawel Lula，感谢您的回复-但这无济于事，因为 mylayout.css 上的样式仍会覆盖整个页面上的 ngdocs 样式...我正在寻找一些东西这会将我的样式范围限定为实时示例 div，而不是接管整个页面。诸如“范围样式”之类的东西-请参见此处：html5doctor.com/the-scoped-attribute。 Scoped 样式太实验性了，所以它对我不起作用。 -- 还有其他想法吗？

标签： angularjs documentation jsdoc ngdoc grunt-ngdocs

【解决方案1】：

您可以添加 css 类吗（在 ngdocs cmets 中为您的示例“myexample”调用它，然后从 css 文件中在所有样式之前使用它？

 * @example
   <example module="rfx">
   <file name="index.html">
     <div class="myexample" >
       // my example code
     </div>
   </file>
   </example>
 */

【讨论】：

理论上这可能有效。但是，我必须更改 mylayout.css 以便其中的样式仅适用于“.myexample”类而不是整个页面。因为我有几十个像 mylayout.css 这样的 css 文件，所以这对我不起作用。我正在用我最终做的事情来编辑我的问题 - 尽管它远非完美的解决方案。