I don’t know if this behaviour is intended, but every time I refresh the page, all old hot-updates are applied to the page. So after updating the stylesheet 20-30 times, the page applies all the changes.
This isn’t a “real” problem, but the screen flickers and rending takes some time (if the stylesheet updates were large). So is there a way to disable this? The CSS should be inserted just once after reloading the page, shouldn’t it?
What version of Sage is this?
It’s the latest one (Sage 9 Beta/master branch)
This is just during development in a browsersync session, right? If so, that’s the intended behavior from webpack. You shouldn’t need to refresh at all. For production you should be compiling your assets with yarn build:production which will load all the assets once.
Yes, it’s just during development.
But the problem is, that the page refreshes automatically after changing PHP files, so the entire history of CSS and JS will be applied again. Chrome handles this much faster as Firefox, but sometimes you have to check certain things in other browsers and than this behaviour get’s really annoying 
Here’s a little preview:
Is there any way to disable this?
You might have something set incorrectly in your config.json. Please share the whole file and check your publicPath.
That’s my config.json:
{
"entry": {
"main": [
"./scripts/main.js",
"./styles/main.scss"
]
},
"publicPath": "/wp-content/themes/client-theme",
"devUrl": "https://client.dev",
"proxyUrl": "https://localhost:3000",
"cacheBusting": "[name]_[hash:8]",
"watch": [
"wp-content/themes/client-theme/**/*.php",
"wp-content/themes/client-theme/**/*.twig"
]
}
I don’t use the whole Sage stack because we’re using Twig and Timber internally. I’ve extracted the whole Webpack/Browsersync part, but I’m using the same directory structure as Sage:
Building, Developing, … everything works really fine – except the reloading part
OK, after setting up a new test project with the original Sage code everything works – until installing WordPress as Network/MultiSite. While localhost:3000 works, things get broken at sub-blogs like localhost:3000/en.
So finally I figured it out! 
The path to the asset should not contain the network address, so //localhost:3000/en/wp-content/themes/client-theme/dist/styles/main.css have to be //localhost:3000/wp-content/themes/client-theme/dist/styles/main.css.
To fix it in Sage the asset_path function should be updated. Since I don’t use this one, I wrote my own version and changed:
function asset_path( $file ) {
if ( file_exists( realpath( dirname( __FILE__ ) . '/../dist/assets.json' ) ) ) {
$assets = json_decode( file_get_contents( realpath( dirname( __FILE__ ) . '/../dist/assets.json' ) ) );
return get_stylesheet_directory_uri() . '/dist/' . $assets->$file;
} else {
return get_stylesheet_directory_uri() . '/dist/' . $file;
}
}
to
function asset_path( $file ) {
if ( file_exists( realpath( dirname( __FILE__ ) . '/../dist/assets.json' ) ) ) {
$assets = json_decode( file_get_contents( realpath( dirname( __FILE__ ) . '/../dist/assets.json' ) ) );
return network_home_url() . 'wp-content/themes/' . get_template() . '/dist/' . $assets->$file;
} else {
return network_home_url() . 'wp-content/themes/' . get_template() . '/dist/' . $file;
}
}
Hi,
I have the same issue gopeter had, but I’m stick completely with Sage 9.0.9. running as a Wordpress theme. I had a Sage clean installation and this is my config.json
{
"entry": {
"main": [
"./scripts/main.js",
"./styles/main.scss"
],
"customizer": [
"./scripts/customizer.js"
]
},
"publicPath": "/wp-content/themes/sage2021",
"devUrl": "http://local.sage2021.net",
"proxyUrl": "http://localhost:3000",
"cacheBusting": "[name]_[hash:8]",
"watch": [
"app/**/*.php",
"config/**/*.php",
"resources/views/**/*.php"
]
}
On every scss change, when I refresh the page, or browsersync does automatically after a php/js file change, I see a more blob file in the network panel, loading every single past scss change.
What’s wrong? Do I have to fix something in my config.json?
Thank you,
G.
There is also an open BrowserSync bug that can cause a reloading loop:
https://github.com/BrowserSync/browser-sync/issues/1324
Potential solution:
https://discourse.roots.io/t/tailwind-v2-and-sage-9/19598/35?u=strarsis
https://discourse.roots.io/t/tailwind-v2-and-sage-9/19598/38?u=strarsis
The issue seems to be fixed with this version.