<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
To share CSS common to all components in an angular2 app, we have to currently Add a  to a stylesheet with all the common CSS in the application's index.html (or add the styles to the application's root component and turn off view encapsulation for each component that wants to share this CSS? - not sure if this option works)</p>
<p dir="auto"><strong>Expected behavior</strong><br>
A well-documented and recommended way to share CSS across components - whether one of the current options above, or a newer option that makes it easier to add root-level CSS to share among components.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Ease of use, trying to share CSS among components now involves lots of trial and error and stack overflow-ing for me right now, without knowing the pros/cons of each method.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
All</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.X<br>
2.0.0 final</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] feature request"><pre class="notranslate"><code class="notranslate">[x] feature request
</code></pre></div>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
Introduce a way to bundle css with the help of NgModules (see <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="163204090" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/9726" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/9726/hovercard" href="https://github.com/angular/angular/issues/9726">#9726</a>). These styles would only be usable/scoped to the components inside the NgModules.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Sharing styles between multiple components is currently not supported out of the box. The user either has to insert these styles globally into the head, or copy them into each component's individual stylesheet. Both of these solutions are problematic.</p>