I need to save SCSS file twice for refreshing page

[R0rs12ach]

Bug Report

- [x] bug report -> please search issues before submitting
- [ ] feature request

CLI Version

@angular/cli: 1.0.0
node: 7.8.0
os: darwin x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

Repro steps.

• ng set packageManager=yarn --global
• ng new MyProj --style scss -sd client
• yarn
• make a directory named scss that will included some global style

And now i got a direcotry like this

├── app/
│   ├── app.component.html
│   ├── app.component.scss
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   ├── app.module.ts
├── assets/
├── environments/
│   ├── environment.prod.ts
│   └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── scss/
│   ├── colors.scss
│   ├── entry.scss
│   ├── fonts.scss
│   ├── mixins.scss
│   └── variables.scss
├── styles.scss
├── test.ts
├── tsconfig.app.json
├── tsconfig.spec.json
└── typings.d.ts

• Add a variable in scss/colors.scss

$blue: #28a;

• Import colors.scss and reference the variable $blue in file app/app.component.scss

@import '../scss/colors';
h1 {
    color: $blue
}

After all above step, i changed the value of $blue, and saved what i have changed. I noticed that browser have refreshed, but nothing change. But if i saved the same file again without any change, i found the browser refreshed and show me what i expected.

The log given by the failure.

1. Saved file first time, i got this log:

[0] Hash: 1ccd1622b72d31261e5f
[0] Time: 802ms
[0] chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial]
[0] chunk    {1} main.bundle.js, main.bundle.js.map (main) 21.6 kB {3} [initial]
[0] chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.89 kB {4} [initial]
[0] chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.4 MB [initial]
[0] chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]
[0] webpack: Compiled successfully.

2. Saved file second time without any change, i got this log:

[0] Hash: b02ca63f909fa66d4868
[0] Time: 830ms
[0] chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial]
[0] chunk    {1} main.bundle.js, main.bundle.js.map (main) 21.6 kB {3} [initial] [rendered]
[0] chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.89 kB {4} [initial]
[0] chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.4 MB [initial]
[0] chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]
[0] webpack: Compiled successfully.

You must notice that there one more symbol [rendered] after i saved file 2nd time

Desired functionality.

Is there anybody who can tell me how to solve that, or point out my fault. Thank you, guys. lol

[cj0x39e]

maybe: http://stackoverflow.com/questions/34213253/webpack-watch-not-working-on-webstorm-on-windows

[R0rs12ach]

@taozhiw Actually, I use VSC as my code editor. After read your repost and link, i should say my problem does not match those answers.

This is my development env:

Details

OS: macOS Sierra Editor: VSC 1.11.0 Node: 7.8.0 Angular-cli: 1.0.0

[MRokas]

From my personal experience, I'm sure that's webpack's issue.

[R0rs12ach]

@MRokas But how to solve it?

[R0rs12ach]

@evmar May this issue has the same one?

[R0rs12ach]

@MRokas , I found i could get correct refreshing by webpack, you can check via ng-admin . May be i should give up ng-cli

[filipesilva]

I could not reproduce this issue. I initialized a new project, and using VSCode, the second I hit save after adding the code below the page updated with the new color.:

@import '../scss/colors';
h1 {
   color: $blue
}

Perhaps this was fixed in recent versions, all I know is that it doesn't happen anymore.

If you're still experiencing this, have a look at #1610. Maybe the cause for your issue is listed there.

[jairmilanes]

This has been here a while and already closed, but I ran into this issue and wanted to leave my solution here to help other who may arrive here looking for answers.

My exact problem was that I had to save any of my scss files twice, on the first time the page was refreshing, but the css changes would not apply, only with a second save.

The problem for me was having the aot flag set to true under options in my angular.json file:

"options": {
    "outputPath": "dist/browser",
    "index": "src/template.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": true,
    "assets": ["src/favicon.ico", "src/assets"],
    "styles": [
           "node_modules/prismjs/themes/prism.css",
           "node_modules/prismjs/themes/prism-twilight.css",
           "node_modules/prismjs/plugins/toolbar/prism-toolbar.css",
           "src/styles.scss"
     ],
     ...
}

Removing it or setting it to false salved my problem.
Help it helps!