ngdocs - how to add styles to live demo example

Question

I'd like to add my css stylesheets to the live demo examples in the ngdocs documentation.

I want the styles to affect the demo itself, but obviously, they should not affect the entire web page.

I tried adding my stylesheet to the gruntfile ngdocs options as follows:

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

This does add mylayout.css as a link tag to the markup of index.html, as the last included link tag in the head section, but the styles in it override the styles on the entire page. No good.

What do I do so that my styles work within the live demo, but not on the rest of the page?

Thanks for your help! Hope this'll make a contribution to the very limited available information on ng-docs!

EDIT: What I ended up doing is creating a new css file called myNgdocsLayout.css in which I wrote a couple of styles overriding some of mylayout.css, while still allowing mylayout.css styles to apply to the live demo.

Now my pages look OK, but this is definitely not a perfect solution. I'd still appreciate if anyone can come up with an idea that would allow my styles to apply only to my live demo, without needed to override them for the rest of the page... I'd be surprised if there was no built-in way to do this in ngdocs.

Answer 1

Can you add css class (call it for your example 'myexample' in ngdocs comments and then from css file use it befoure all you styles?

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