vue.config.js settings break hot reloading for css/scss during development

[chaddugas]

Version

3.5.5

Reproduction link

https://github.com/chaddugas/vue-cli-min-repro

Environment info

Environment Info:

  System:
    OS: macOS 10.14.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 73.0.3683.86
    Firefox: 65.0.1
    Safari: 12.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.3 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.3 
    @vue/babel-preset-app:  3.5.5 
    @vue/babel-preset-jsx:  1.0.0-beta.3 
    @vue/babel-sugar-functional-vue:  1.0.0-beta.3 
    @vue/babel-sugar-inject-h:  1.0.0-beta.3 
    @vue/babel-sugar-v-model:  1.0.0-beta.3 
    @vue/babel-sugar-v-on:  1.0.0-beta.3 
    @vue/cli-overlay:  3.5.1 
    @vue/cli-plugin-babel: ^3.5.5 => 3.5.5 
    @vue/cli-service: ^3.5.3 => 3.5.3 
    @vue/cli-shared-utils:  3.5.1 
    @vue/component-compiler-utils:  2.6.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    vue: ^2.5.17 => 2.6.10 
    vue-cli-plugin-pug: ^1.0.7 => 1.0.7 
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-router: ^3.0.1 => 3.0.2 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.17 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.0.1 => 3.1.0 
  npmGlobalPackages:
    @vue/cli: 3.5.5

Steps to reproduce

1. start dev server: npm run serve
2. make a change to the template scss in app.vue or views/main.vue
3. save

What is expected?

The browser window running the local server would reflect the changes made to the css/scss.

What is actually happening?

The browser window running the local server does not reflect the changes made to the css/scss. You have to manually refresh the page to see the new styles.

---

The issue seems to be caused by the following lines in the vue.config.js file:

    extract: {
      filename: '[name].css',
      chunkFilename: '[id].css'
    }

If you comment this out, then restart the dev server, scss/css hot reloading is fixed. However I need these lines in the config file because I can't have the random hash generated by the cli appended to the file names.

[LinusBorg]

Well, if you extract the CSS, hot reloading can't work. We would recommend to apply this setting only in production.

    extract: process.env.NODE_ENV !== production ? undefined : {
      filename: '[name].css',
      chunkFilename: '[id].css'
    }