Sage 9 + BrowserSync not loading any CSS at all on 'yarn run start'

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.

1 Like

This is tough to confirm without seeing the actual file.

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.

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp-content/themes/wbiggs",
  "devUrl": "http://localhost",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

publicPath is set to the correct path afaik.

1 Like

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.

1 Like

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.

1 Like

And you’re pointing your browser to http://localhost:3000?

Do you see browsersync messages in the top right of the browser window when you save a file?

When you build manually are you using yarn build or yarn build:production?

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.

2 Likes

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.

1 Like

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.

1 Like

Yes, indeed, styles are not injected for me, too.
Which is indeed the biggest issue because usually I work on them most of the time.

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.

1 Like

Yes, I have. Everything remains unstyled.

1 Like

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.

1 Like

Edit: I am running the watch script on WSL/Bash on Windows, with native file system watching.

So am I! Looks like we found a common reason this could be not working. Hmmmmmmmm…

1 Like

I get this problem regularly, where the .test site doesn’t get the CSS for a long time.

And a (likely) related problem where the BrowserSync CSS doesn’t update when changes are saved.

In both cases I need to hard-reload over and over to see updates.

2 Likes

Got the same problem over here. Using a .local address an Google Chrome.

Sage 9 issues during yarn run start usually mean that your publicPath and/or devUrl in resources/assets/config.json are incorrect

Can anyone confirm that this happens on a completely unmodified version of Sage 9 with the proper publicPath and devUrl?

If you’ve already made changes to your styles or JS, it’s possible you’re hitting a linting error that isn’t being shown

Would be interested to see if this fixes for others. Think there’s an issue with the JS loading, and that manifests in not loading the CSS updates.

Try adding "headers": { "Access-Control-Allow-Origin": "*" }, to config.json

That appears to be fixing it here now. The page will still load with no assets/js/css at first, but after a reload or two it all works.

Also: make sure you your proxyUrl is secure with https as well.

Have tested the above on a fresh install. Was able to duplicate my problem and then fix it with the above.

3 Likes