11

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.

UsamaMan
  • 695
  • 10
  • 28
  • Please ask me if anyone need some extra information. – UsamaMan Nov 11 '16 at 17:01
  • Obviously CTRL+F isn't an appropriate solution. Please guide me with a better answer. – UsamaMan Nov 12 '16 at 06:43
  • 2
    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. – Jason Swett Nov 15 '16 at 16:35
  • Thanks @JasonSwett. I tried your advice and it was of great help. – UsamaMan Nov 16 '16 at 10:12

2 Answers2

5

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

toioski
  • 1,094
  • 10
  • 21
  • 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`. – AsGoodAsItGets Jan 20 '20 at 09:37
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.

UsamaMan
  • 695
  • 10
  • 28
  • You could also make your own source maps as in this demo : https://www.sitepoint.com/using-source-maps-debug-sass-chrome/ – Karbos 538 Nov 18 '16 at 10:33
  • I'm facing the same problem. How to use it in components? I'm new to Angular 2. – wm1sr Jan 23 '17 at 13:45
  • @wm1sr. As the answer suggests, you will have to generate new components and add styles there. For more info, click [here](https://angular.io/docs/ts/latest/tutorial/toh-pt3.html) – UsamaMan Jan 23 '17 at 18:30
  • So for every component I create I'll have to specify the .css file (in my case the Bootstrap) in the styles array? – wm1sr Jan 23 '17 at 19:02
  • @wm1sr. I dont understand what you mean by styles array. Could you please elaborate? – UsamaMan Jan 24 '17 at 07:22
  • and please specify if you're following the angular2 official tutorial or using angular cli. – UsamaMan Jan 24 '17 at 07:23
  • 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). – wm1sr Jan 24 '17 at 16:10
  • @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](https://github.com/angular/angular-cli#generating-components-directives-pipes-and-services). I hope this will clear your confusion but if you have any more questions, please feel free to ask. – UsamaMan Jan 24 '17 at 23:11
  • 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. – wm1sr Jan 25 '17 at 11:32
  • @UsamaMan 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... – wm1sr Jan 25 '17 at 11:35
  • @wm1sr. If you just want to use bootstrap, try using [ng2 bootstrap](https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md) and check if it still appears embedded? – UsamaMan Jan 25 '17 at 12:14
  • @UsamaMan yes :'( – wm1sr Jan 25 '17 at 12:41
  • I think we should add this issue to angular-cli's GitHub. – UsamaMan Jan 25 '17 at 12:44
  • 2
    @UsamaMan Ok. I'm going to do that. Thanks for the help man. :) – wm1sr Jan 25 '17 at 15:51