Compile component styles into styles.bundle.css

[MickL]

Bug Report or Feature Request (mark with an x)

- [ ] bug report
- [X] feature request

Versions.

v1.3.0-rc.3

Repro steps.

Compile (ng start / build) with --extract-css true. Styles set in .angular-cli.json will be bundled into a single file (correct). Component styles are still inline (and, btw, have no sourcemaps).

Further question

Is it possible to concat component-styles with the main style.bundle.css to have a single css-file only? If this is done before sass runs, this would also solve #1253

[filipesilva]

This is actually by design. Component styles are isolated and get special handling by the AOT compiler. So in that sense there is no point to try and put it in the global styles.

#1253 is solved by importing the css variables into the component css. It might be tedious, but it is correct since they are isolated. If you don't care about the isolation you can turn view encapsulation off and just use global styles anyway.

Since inline styles are violating CSP, then Angular 2 becomes unusable in environments that require the use of restrictive CSP

[stich6269]

Google page speed checker is mark inline styles like a uncompressed tex, and gives a strike(

[psmyrdek]

Imagine such case:

1. I'm building a dynamic app using Angular - all the styles sit next to components
2. I want to use the same styles on the landing page where .js is not needed, and I want to server-render "component-like" html to show users what's waiting for them after signing in
3. Without the possibility to extract component styles... all of that is not possible

That's really, really bad idea.

[MickL]

You dont have to use component styles. Component styles are lazy loaded with the corresponding module and applied using shadow dom (emulation). They have tons of benefits but are not made for usage outside at all. But you can write your global styles they are great for overall styling and also import your global variables and mixins into component styles.

I think it is correct that this issue is closed.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}