CSS not updating with browsersync intermittently

CSS won’t update properly sometimes. Browsersync trying to do its thing but the CSS not updating. Using ‘yarn run build’ which seems to reset things for a while but the problem reappears again. A timewasting workflow situation.

Also as noted in another ticket Browsersyc not working properly on blade update / fonts / scss changes blade updates are not triggering an update in the browser, fonts placed in the font folder are not copying to the dist folder. Maybe related?

I also can’t reference images using the …/ syntax outlined in the documentation for CSS. The only way I’ve been able to get this to work has been to use a full path “/app/themes/pdcref/dist/”. If I use the syntax as described in the sage book I get:

 ERROR  Failed to compile with 1 errors                          11:41:41

This relative module was not found:

* ./images/page-detail.svg in ./node_modules/cache-loader/dist/cjs.js!./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/dist/cjs.js?{"postcssOptions":{"path":"/Users/***/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref/resources/assets/build","ctx":{"open":true,"copy":"images/**/*","proxyUrl":"http://localhost:3000","cacheBusting":"[name]_[hash:8]","paths":{"root":"/Users/***/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref","assets":"/Users/***/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref/resources/assets","dist":"/Users/***/Websites/pdcref.co.uk/bedrock/web/app/themes/pdcref/dist"},"enabled":{"sourceMaps":true,"optimize":false,"cacheBusting":false,"watcher":true},"watch":["app/**/*.php","config/**/*.php","resources/views/**/*.php"],"entry":{"main":["./scripts/main.js","./styles/main.scss"],"customizer":["./scripts/customizer.js"]},"publicPath":"/app/themes/pdcref/dist/","devUrl":"http://localhost","env":{"production":false,"development":true},"manifest":{}}},"sourceMap":true}!./node_modules/resolve-url-loader?{"sourceMap":true}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true,"sourceComments":true}!./node_modules/import-glob!./resources/assets/styles/main.scss

Sorry if opening a new ticket is not the done thing but I have no idea if these ARE related and my last post has been unanswered. And sorry if I’m just mixing in a whole load of unrelated stuff but it seems like me it could all be an indication of one issue?! I’m really not getting to experience the full benefit of the theme so would be super appreciative of any help that could get my workflow to its potential!

OK, so I’ve noticed that in the code inspector on Chrome is shows two instances of each class - one with the recent changes and an older version too.

There is definitely one version of main.css being loaded into the file.

So something wrong with the cacheing?! I have no idea where to go from here.

This is severely impacting dev time. I’ve a tiny issue to fix but am almost unable to just because I can’t see the changes I make, or they’re confused by other things I’ve tried lingering about in the style sheets.

Due to various issues and installing sage on this (my 3rd project) I’m really wondering if it’s typical each build to spend ages battling away simply to enjoy some nice coding in the brief moments the environment is stable?! Each project I’ve ran into different issues with what I would have thought is the same build! The last project is simply a holding page I’ve quoted two days work for and now almost the whole day extra I’ve spent unable to understand what’s going on, or easily fix the final issue wasting so much time! Is there a way to get help or do I just have to expect there’s very little support and use that in my decision making for what to build my next project with?! This theme has so much potential but is a source of so much frustration as well.

I’m sorry you’re not having much luck with support :confused: most folks on here seem to be building new sites with Sage 10.x instead of 9.x these days. We plan on circling back to Sage 9.x after the Sage 10 launch to implement Bud as the build tool. You could always drop-in Bud now, or Mix, to replace to existing Sage 9 build setup.

At the end of the day support is provided from volunteers. We’ve always suggested hiring someone from the community for more hands-on support, and many folks have had good experiences doing so :smiley:

AH, I see, I’ll consider just using sage 10. I see so many support requests for that - it looked a bit unappealing for someone just picking this up. Thought the safer bet would have been developing on the stable version 9 first.

I’d be completely open to paying for a bit of support on a bigger project (one of which I have coming up soon) but I’m sure support would cost a lot more than I’m earning for a small holding page site like this so probably not feasible.

You could always drop-in Bud now, or Mix, to replace to existing Sage 9 build setup.

This feels like a small sentence for a big can of worms! I would have no idea how to do that, and its only a small issue left on the site to fix now. Albeit an incredibly frustrating one. Do you have any suggestions on why I’m experiencing those issues?

Are you using the latest Sage 9.x release by the way? The last Sage 9.x release updated to webpack 5 and fixed a lot of issues.

I downloaded it about 2 weeks ago, says version 9.0.10

Composer will install the current release (version 9.0.10) by default. To get the latest changes strarsis referred to, you’d need to specify the 9.x-dev branch:

composer create-project roots/sage your-theme-name "9.x-dev"

So that command will install the latest released developer version from Github? This would run into less problems than the default last stable build :upside_down_face: Doesn’t mention anything like this in the help documentation :melting_face:. Is that the general recommendation to always download the latest versions then? Is there help documentation yet for v10?

Just not sure how best to keep up with what the best thing to do is! How does everyone manage to stay on top? I love this theme so much when it’s working for me, feels like genius compared to other themes I’ve used. But find it really difficult to debug issues, especially with the build side of things, just don’t know where to start.

:upside_down_face: we love docs contributions lol

It’s a starter theme. Fork it, modify it to your needs, and use that as your starting point.

Reference the Sage repo/changes/releases and pick in any updates you find relevant.

I created this thing, and personally… I almost never try to work in updates that have made their way into Sage unless there’s something absolutely necessary based on a WP or editor change.

There’s a lot of folks that make their lives very difficult by trying to always stay on top. Lately I’ve seen people trying to upgrade from alpha versions of Sage 10 and Acorn onto the latest versions and running into tons of issues. If there’s a reason behind needing to do it, then by all means - you gotta do what you gotta do. Don’t ever update just because there’s an upstream change. You’re the one that should decide if you need to pull down that change or not. This isn’t a framework.

Happy to contribute (in fact have contributed already to the help docs) but really need a foothold before I can add anything meaningful!

So basically you’re advocating the approach I’ve taken with using the last stable build?

Glad to hear your approach as I have 2 previous projects which I hope remain stable!

Sage 10 uses bud (in latest beta) which abstracts building plumbing away (webpack).
It is maintained by roots and IMHO this should bring some stability. The JS tooling is changing all the time.

1 Like