ruby-on-rails - 如何修复 webpacker webpack-dev-server 不重新编译 scss 更改

Question

我正在使用webpacker来管理javascript,scss并assets在我的 rails 项目中。我使用以下命令运行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)

我试图更改 to 的设置dev_server，此时 CSS 文件甚至没有加载。网络中没有请求获取 CSS 文件！！！hmr: falsehmr: true

---

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

标签： ruby-on-railsbuildwebpack-dev-serverwebpack-style-loaderwebpacker