Why styles appear inline in a validation element in Angular 2

Question

I downloaded a free HTML theme called dashgum from the Internet. I am implementing it for an Angular2 application using angular-cli . I converted the css files to .scss and pasted the code into an angular app. Then I imported the files into a global stylesheet file called styles.scss to apply styles to the application as follows:

@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 encounter during debugging is that all styles are displayed as inline styles in the browser (note the style tag):

I want the style to appear as external styles during validation, as in the subject. Take a look at the following screenshot:

These are the default settings in angular 2, since I did not make any visible changes to the styles that will be displayed during the inspection process. Is there any known way to change the settings in angular 2 so that styles appear as external styles when checking? Nested styles make debugging difficult. Any help directed towards a solution would be appreciated.

Answer 1

My first tip (e.g. official Angular CLI documentation says) is to place your global library inside .angular-cli.json as follows:

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

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

 ng serve --extract-css 

And you will have this:

Answer 2

I found out that styles imported into the global styles.scss file always appear as inline when checking in the browser. If we want css to appear as external styles, we will need to use it in components.

Edit:

See toioski answer above.