如何修复Webpacker webpack-dev-server不在scss更改上重新编译

Question

我正在使用webpacker在rails项目中管理javascript，scss和assets。我已经使用以下命令来运行webpack-dev-server。

bin/webpack-dev-server

当我更改javascript文件内容时，将对其重新编译并在页面刷新时获取更新的内容。但是，当我尝试与scss相同时，文件更改不会更新。

Webpacker开发服务器在更改时未重新编译scss文件。

以下是我的webpacker.yml dev_server配置：

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/

以下是依赖性

"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"
  }

更新：1（hmr: true）

我试图将dev_server的{​​{1}}设置更改为hmr: false，这时CSS文件甚至都没有加载。网络上没有任何请求来获取CSS文件！

---

我希望在更改hmr: true文件内容scss时会像对webpack-dev-server文件更改那样自动重新编译，并且当我刷新时，更改会反映在页面上，而无需手动进行编译。