Styles in the root are not getting applied in angular-cli project

Question

I am working on an angular-cli project. I am using SCSS and they're getting compiled and I can observe the changes of them. styles.css and app.component.scss in the root path are neither getting compiled nor can observe the changes.

Here it's the root folder structure. style.css is compiled to the root structure (This is done in angular-cli.json)

"styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      "../node_modules/mdi/css/materialdesignicons.min.css",
      "../node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
      "../node_modules/font-awesome/css/font-awesome.min.css",
      "../node_modules/tinymce/skins/lightgray/skin.min.css",
      "styles.css"
    ]

You cannot see the style.css because, it's hidden using vscode settings. What is wrong here and how can i get the changes applied here?

the styles-array in angular-cli.json does not compile anything to styles.css, it tells the cli that styles.css should be part of the bundled styles in dist. — Johan Blomgren, Dec 11 '16 at 09:00
the app.componenent.scss is injected in the component and does not get a unique css-file, it should "just work" — Johan Blomgren, Dec 11 '16 at 09:04
it should "just work". Exactly @JohanBlomgren . The issue is it's not getting compiled even that's in the root directory. And there's a app.component.css , but new changes are not getting compiled there. — Saiyaff Farouk, Dec 11 '16 at 10:14
what made the app.component.css? if you use angular-cli's scss support you don't get css-version of every scss-file — Johan Blomgren, Dec 11 '16 at 10:39
@JohanBlomgren I used angular-cli to make the app component. FYI - Each time I create a component, a SCSS file is added in the component. It's configured in the angular-cli.json — Saiyaff Farouk, Dec 11 '16 at 11:06
And if you change something in the component.scss -file like a color or font-size does the actual result show in your app when you do "ng serve " or "ng build " ? — Johan Blomgren, Dec 11 '16 at 11:10
For app.component.scss 's changes are not shown in the app. but, browser refreshes. In the created components it shows up the changes. @JohanBlomgren — Saiyaff Farouk, Dec 11 '16 at 11:45
so the changes to app.component.scss are shown in your browser when you browse to that component? — Johan Blomgren, Dec 11 '16 at 11:48
Nope. That's the issue. Changes are not shown for app. component.scss. But, the other components I made in the root directory detect the Scss changes. — Saiyaff Farouk, Dec 11 '16 at 13:07
I would copy the code to a temp-file and re-create the component — Johan Blomgren, Dec 11 '16 at 16:33
I found 'ng g c ' handy. :) , By the way, thanks for the consideration to help. @JohanBlomgren — Saiyaff Farouk, Dec 12 '16 at 09:04

score 0 · Answer 1 · answered Dec 12 '16 at 22:25

0

What version of angular cli are you using?

I was using 1.0.0-beta.22-1 and styles.css was not properly being bundled in the prod build. Downgraded to 1.0.0-beta.19-3 and it works again. Seems to be a bug in the later cli project.

answered Dec 12 '16 at 22:25

jms

3
2

1.0.0-beta.18 is the version um using – Saiyaff Farouk Dec 13 '16 at 08:47

score 0 · Accepted Answer · edited May 23 '17 at 12:09

Managed to solve this. The problem I encountered was because of initially when my project was created the default extension for styles was CSS and it has been changed by the time since styling with SCSS is much prettier.

So, the issue was the previous configuration in angular-cli.json. when the compilation happens, it doesn't detect the change in the SCSS file, but its search for a CSS This was the answer helped me to understand the mistake - Angular2 - Angular-CLI SASS options

PS - It's where I went on the mistake.

Styles in the root are not getting applied in angular-cli project

2 Answers2