search

htmlburger / wpemerge-theme

An organized, ES6 and SASS powered theme taking advantage of the WP Emerge framework. 🚀
https://wpemerge.com/
GNU General Public License v2.0
286 stars 33 forks source link

CSS edit triggers full page reload #44

Closed TCattd closed 4 years ago

TCattd commented 4 years ago

Version

Please add the exact versions used for each of the following:

Expected behavior

By the info shown at /resources/build/browsersync.js (injectCss = true) i think the theme should hot-reload and inject the css without a full page reload.

Actual behavior

Changing some SCSS will trigger a full page reload.

Steps to reproduce (in case of a bug)

  1. Install a fresh wpemerge-theme, use scss.
  2. yarn dev
  3. change something in /resources/styles/theme/index.scss and watch a full page reload to happen.

Comments

Video: https://photos.app.goo.gl/mszfYYFiffmzbsmM8 yarn dev at 40 seconds mark.

atanas-dev commented 4 years ago

Hi @TCattd ,

The BrowserSync Webpack plugin only ever injected CSS when no non-css files were output by webpack during a change which was never the case in the theme. I've replaced BrowserSync with Webpack Dev Server in master which resolves the issue and includes some other goodies (e.g. an error overlay when compilation fails).