Sage: When running `npm start` `*.scss` or `*.css` file changes cause browser-sync to reloads the page instead of injecting the css changes.

[jgeschwendt]

Submit a feature request or bug report

• [X] I've read the guidelines for Contributing to Roots Projects
• [ ] This is a feature request
• [X] This is a bug report
• [X] This request isn't a duplicate of an existing issue
• [X] I've read the docs and NPM Debugging Guidelines post and followed them (if applicable)
• [X] This is not a personal support request that should be posted on the Roots Discourse forums

---

What is the current behavior?

When running npm start any asset change (css, js, scss) results in a browser-sync full page refresh.

What is the expected or desired behavior?

When running npm start any css/scss changes should be injected instead of a full page refresh.

---

This stopped working in version 9.0.0-alpha.2 when the npm watch workflow was removed.

[derkjn]

I guess this is not really a bug, just a different configuration, since the webpack-dev-server is not listed in the given package.json file.
I'm not too sure though if the current version of the dev-server is compatible with webpack2.
By the looks of things anyway, it looks like the whole configuration for the dev-server and hot module replacement has been dropped in the current version.

[jgeschwendt]

I have the HMR working with the older implementation usingwebpack-dev-middleware and webpack-hot-middleware as browser-sync middleware & works with the newer build refactor.

I guess I'm wondering why the HMR feature was removed?

[QWp6t]

It wasn't deliberate. I thought I had tested it out with the webpack browsersync plugin and determined that the plugin was injecting the changes without reloading, effectively doing the same thing that we were doing in alpha 1. But I must've had some wires crossed or something since obviously that's not the case.

I'll get this fixed before the next alpha release.

[QWp6t]

This fixed in the master branch. New alpha version will be tagged soon.

[dani-z]

Hi all,

Don't want to open a new Issue but I'm still having the same problem after merging the master in my setup. The problem is like @geschwendt said. It opens the page with BS connected, it's rebuilding when I save a CSS or JS file but it does not inject the code in page.

I've also tried to add

"watch": [
...
    "assets/**/*.scss"
...
  ],

The page is refreshed but again no css/js is injected. Will keep posting if I find anything on this.

Cheers

[dani-z]

@QWp6t any thoughts on this? I can't really manage to find the issue. Thanks

[Greg36]

@geschwendt I had a similar issue where HMR was connected and was injecting changes but with each change the browser was reloading as well.

By default, BrowserSync is injecting changes only when css or image file changes. With php, html and js files it triggers a full page reload.

To change that just add here this:
injectFileTypes: ['scss','js'],