Search code examples
cssangularscss-lint

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.

Solution

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

    Inspector element result