Search code examples
phoenix-frameworkbrunchsass-brunch

sass-brunch omits modified SCSS on live-reload

On my Phoenix project, I found a peculiar behavior of sass-brunch.

Here are the short descriptions of my problem:

  • It generates a correct app.css on the priv/static/css directory when the Phoenix server started in dev envrionment.
  • When I modify one of SCSS files, the app.css gets generated but lacks only the lines from the modified SCSS file. It keeps the lines from the unmodified files.
  • This problem occurs on Ubuntu 16.04, but not on macOS.

On the log file, I noticed an entry that may be related to this issue:

[debug] Duplicate channel join for topic "phoenix:live_reload" in Phoenix.LiveReloader.Socket. Closing existing channel for new join.

I don't see such a line on my Mac.

My environment:

  • Ubuntu 16.04 Desktop
  • Phoenix 1.2.5
  • Node.js 8.9.1
  • npm 5.5.1
  • Brunch 2.10.7
  • sass-brunch 2.10.4

My package.json:

{ "repository": {}, "license": "MIT", "scripts": { "deploy": "brunch build --production", "watch": "brunch watch --stdin" }, "dependencies": { "phoenix": "file:deps/phoenix", "phoenix_html": "file:deps/phoenix_html" }, "devDependencies": { "babel-brunch": "6.0.6", "brunch": "2.10.7", "clean-css-brunch": "2.10.0", "sass-brunch": "^2.10.4", "uglify-js-brunch": "2.1.1" } }

[UPDATE]

I found an interesting fact.

  • When I edit SCSS files using vim, the app.css gets generated normally.
  • When I edit them using atom, things do not go well.
Solution

  • I found a workaround to my problem.

    Put these lines to the brunch-config.js:

    watcher: { usePolling: true }

    As the documentation of Brunch says, watcher gets slower but can be more reliable by setting true to this option.

    The usePolling option is passed to chokidar, whose document says:

    usePolling (default: false). Whether to use fs.watchFile (backed by polling), or fs.watch. If polling leads to high CPU utilization, consider setting this to false. It is typically necessary to set this to true to successfully watch files over a network, and it may be necessary to successfully watch files in other non-standard situations.