UsamaMan UsamaMan - 9 months ago 49
CSS Question

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

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):

enter image description here

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

enter image description here

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.

Answer Source

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