Hi all. I’m having a weird issue getting any CSS to load thru browsersync. When I do yarn run build, the CSS is compiled and loads fine. However, when doing yarn run start instead, all the HTML loads, but none of the CSS does - I just get unstyled content. I don’t get any console errors (just the usual GET main.css net::ERR_ABORTED error) or any messages in the terminal. I can’t tell why this is happening; there are no errors anywhere at all.
Any ideas? My config.json is correctly configured, as is everything else (as far as I can tell). This is a pain.
I also have a similar issue. I never got styles hot reloading working. Because I am mostly using the web developer console (browser inspector), it isn’t that bad to manually rebuild from time to time – but a hot reload would be definitely an improvement.
This is just so weird. I can’t find an issue anywhere that could be causing this. It’s really slowing down my work right now - waiting 8 seconds for everything to build whenever I make a minor CSS change isn’t exactly efficient. Urghhh.
Well, the speed of the build and it not building and injecting at all (your original problem) are different things.
I’ll occasionally see unstyled content on the first load of a browsersync session; I usually either SHIFT-reload or make a stylesheet change (or just re-save a file) and then SHIFT-refresh again for good measure and it fixes itself.
If instead you’re having problems with slow builds, you could try removing scss lines from main.scss one by one to see if a particular stylesheet is taking a long time to build?
Oh no, the build speed isn’t the issue - it’s just an annoyance to have to build every time I make an edit rather than be able to use yarn run start. Hard refreshing and re-saving don’t do anything for me, btw.
I see browsersync messages, and I’m pointing my browser to that link. When I build manually I’m just using yarn build. I tried doing a clean install of Sage and just dropping the styles and views back in and the problem still occurs.
I also see a rebuild message webpack built [some hash] in ms directly in browser (browsersync proxied) after saving a file modification, but nothing changes in browser.
I think we’re having different issues - modified views (.blade.php files) get injected for me, but styles don’t - not when yarn start is run, and not when files are modified.
EDIT: I misunderstood the above post, lol. When I save SCSS files, everything properly recompiles and I get the same ‘webpack built…’ message, but the CSS still isn’t injected and everything remains unstyled.
Just for ha-has, have you tried force-refreshing a few times after seeing a recompile message? Like I said, I see this sometimes but a force-refresh usually kicks it into gear.
Me, too. Restarted the browser, incognito mode, cleared everything, used different browser, etc.
Saving a stylesheet results indeed in an automatic rebuild, I even see stylelint errors in browser. But the styles themselves aren’t applied to the page.
Edit: I am running the watch script on WSL/Bash on Windows, with native file system watching.