question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Compile component styles into styles.bundle.css

See original GitHub issue

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 https://github.com/angular/angular-cli/issues/1253

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

5reactions
ghostcommented, Mar 14, 2018

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

1reaction
psmyrdekcommented, Jan 26, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Component styles - Angular
One way to do this is to set the styles property in the component metadata. The styles property takes an array of strings...
Read more >
Is it possible to build separate CSS file with angular-cli?
Yes! In your angular.json file the common thing to do is "styles": [ "styles/bootstrap.scss", "styles/app.scss", "styles/whatever-else.scss" ].
Read more >
How to split external styles into named bundles in angular
Sometimes we'd like to split third-party external styles or legacy styles into a separate CSS bundle on building our angular application.
Read more >
Building StyleSheets Using the Angular CLI - Pluralsight
In this guide, you learned how to build styles using the Angular CLI. Specifically, you saw how you can set the stylesheet format...
Read more >
Reduce your bundle size through this component styling ...
None so it can be overwritten, what it does is, it writes the styling in global css file generated. Let's write some code...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found