Why do the styles appear embedded on inspect element in Angular 2

Question

I downloaded a free HTML theme named dashgum from the internet. I'm implementing it for an Angular2 application using angular-cli. I converted the css files to .scss and pasted the code to the angular application. I then imported the files in the global styles file named styles.scss to apply the styles to the application like this:

@import url('./scss/bootstrap.scss');
@import url('./scss/font-awesome/css/font-awesome.scss');
@import url('./scss/zabuto_calender.scss');
@import url('./scss/gritter/css/jquery.gritter.scss');
@import url('./scss/lineicons/style.scss');
@import url('./scss/style.scss');
@import url('./scss/style-responsive.scss');

The problem that I'm facing during debugging is that all the styles appear as embedded styles in the browser like this (notice the style tag):

I want the style to appear as external styles while inspecting like in the theme. Please notice it in the following screenshot:

These are the default settings in Angular 2 as I made no apparent changes for the styles to appear embedded when inspecting. Is there any known way to change the settings in Angular 2 for the styles to appear as external styles when inspecting? The embedded styles make it harder for me to debug. Any help pointing out towards the solution would be appreciated.

Subcontract

Please ask me if anyone need some extra information. – Subcontract

Obviously CTRL+F isn't an appropriate solution. Please guide me with a better answer. – Subcontract

If I were you, I think one step I would take is to spin up a blank Angular CLI project and then add Bootstrap to it. Going through this process may give you some insight as to why you're having this issue with dashgum. – Uranometry

Thanks @JasonSwett. I tried your advice and it was of great help. – Subcontract

Answer 1

My first advice (like official Angular CLI documentation says) is to put your global library inside .angular-cli.json like this:

  ...
  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "styles.scss"
  ],
  ...

Then just run the app with the --extract-css parameter to see in the browser inspector the source files:

ng serve --extract-css

And you will have this:

Railhead

Unfortunately this is not applicable to Angular 8+ anymore: Unknown option: '--extract-css'. I think the --extractCss option is now available only for ng build, not ng serve. – Slangy

Answer 2

I have learned that the styles imported in the global styles.scss file always appears embedded when inspecting in the browser. If we want the css to appear as external styles, we will have to use it in components.

Edit:

See toioski's answer above.

Subcontract

You could also make your own source maps as in this demo : sitepoint.com/using-source-maps-debug-sass-chrome – Broads

I'm facing the same problem. How to use it in components? I'm new to Angular 2. – Pangaro

@wm1sr. As the answer suggests, you will have to generate new components and add styles there. For more info, click here – Subcontract

So for every component I create I'll have to specify the .css file (in my case the Bootstrap) in the styles array? – Pangaro

@wm1sr. I dont understand what you mean by styles array. Could you please elaborate? – Subcontract

and please specify if you're following the angular2 official tutorial or using angular cli. – Subcontract

I'm using angular-cli. With this framework you import global styles through the angular-cli.json file right? In the apps[0].scripts array. When I add Bootstrap.css there, the styles appear as embedded, and that's the same problem you're facing. I want to know a way to show styles as external files, like the way you see in a regular Angular 2 project (importing global styles normally, through the index.html). – Pangaro

@wm1sr. You see the src/styles.css file? That's where we include the global styles (but they appear embedded). I don't know if we can include the global styles with your way. it might be possible. To view the styles as external, you will have to create components and add the styles there. For more information on how to create, view this link. I hope this will clear your confusion but if you have any more questions, please feel free to ask. – Subcontract

Yes, I can confirm that this is the correct way to import global styles in anguar-cli. But the problem is that I can't import them through a component because it's going to be available only to that component. I want the Bootstrap.css to be available accross all components in my app. – Pangaro

@Subcontract in angular-cli, the Angular 2 now uses webpack instead of SystemJS to handle dependencies. Maybe that's just the way webpack works, importing external styles as embedded... – Pangaro

@wm1sr. If you just want to use bootstrap, try using ng2 bootstrap and check if it still appears embedded? – Subcontract

@Subcontract yes :'( – Pangaro

I think we should add this issue to angular-cli's GitHub. – Subcontract

@Subcontract Ok. I'm going to do that. Thanks for the help man. :) – Pangaro