Webpacker: webpack-dev-server not recompiling on scss changes

[dipakchandranp]

I am using webpacker for managing javascript, scss and assets in my rails project. I have used following command to run webpack-dev-server.

bin/webpack-dev-server

when ever I am changing javascript file content its recompiling and on page refresh getting updated content. But when I try the same with scss file changes its not updating.

Webpacker dev server is not re-compiling scss files on change.

Following is my webpacker.yml dev_server configuration:

development:
  <<: *default
  compile: false

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      "Access-Control-Allow-Origin": "*"
    watch_options:
      ignored: /node_modules/

Following is the dependency

"devDependencies": {
    "babel-jest": "^22.4.3",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "husky": "^0.14.3",
    "jest": "^23.4.1",
    "jest-junit": "^4.0.0",
    "prettier": "1.16.4",
    "pretty-quick": "^1.10.0",
    "rails-erb-loader": "^5.5.2",
    "react-test-renderer": "^16.3.2",
    "stylelint": "^9.2.1",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-scss": "^3.5.4",
    "webpack-bundle-analyzer": "^2.12.0",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "3.0.0"
  }

Update: 1 ( hmr: true )

I tried to change the dev_server setting for hmr: false to hmr: true and at this time CSS files didn't even loaded. There was no request going in the network for fetching CSS files!!!

---

I expect on changing the scss file content webpack-dev-server will recompile automatically as it does for js file change, and when I refresh changes will be reflected in the page, without doing manual compilation.

[jakeNiemiec]

I think webpack-dev-server needs you to import './file.scss'; in a JS file in order to inject it into the browser .

[dipakchandranp]

@jakeNiemiec I am using <%= stylesheet_pack_tag 'application' %> tag for loading the css into my application

[jakeNiemiec]

The chain basicly works like this:

application stylesheet -> MiniCssExtractPlugin -> application.css -> stylesheet_pack_tag 'application'

MiniCssExtractPlugin does not support webpack-dev-server or HMR. statement from dev: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/296#issuecomment-430679174

Good news time: a PR was just merged for this feature https://github.com/webpack-contrib/mini-css-extract-plugin/pull/334, but it won't come to webpacker unless somebody creates a PR here.

[AmirolAhmad]

same issues in here https://github.com/rails/webpacker/issues/2059

[zedtux]

Now that MiniCssExtractPlugin supports HMR and has been released (version 0.6.0), @jakeNiemiec what is missing to get it working?

[jakeNiemiec]

@zedtux Are you from the future 😄. To answer your question, webpacker needs a PR that revisits the files changed here: https://github.com/rails/webpacker/pull/641/files

I don't know what direction @gauravtiwari will want to take this, but the extract css step takes 27 seconds on our modest codebase. Do you think this should be the default when running webpack-dev-server? Users seem to expect it, but the time cost is rather high if you have a bunch of styles.

[zedtux]

Please don't tell people about me ... 🤣