Hello. I have taken over a WP site with a custom Sage theme. I am getting familiar, while I haven’t used Sage before. There are many .scss files in the /resources/assets/styles/ directories, but when I make any changes to these files, they do not show on the website. In searching online, it seems that I need to recompile the CSS using “yarn build”. I’ve tried this and many other things that I’ve come across, but my CSS changes seem to be refusing to get pulled in. What is the piece I could be missing here?
Could you please describe in detail the steps you’ve taken so far as well as the results of those steps, positive or negative? It’s difficult to determine what the problem might be without more information.
Yes, of course. From my understanding, I need to SSH to the theme directory and run “yarn build” to recompile the SCSS files. It runs, but my site doesn’t pull the updates. I also ran “yarn run lint:styles” which pointed out a few issues in the files. I corrected those and now that is fine. I still haven’t gotten further than that.
I’m running all of this from /wp-content/themes/my-theme-name
When run with production the build process hashes the file names (for cache-busting purposes) and then refeneces them in a JSON file so it knows what they’re called. With run withoutproduction the build process does not hash or update the file. Since the site was probably deployed with production-rendered assets, then it’s not overwriting the existing files.
/www/xxxxxx/public/wp-content/themes/mytheme/node_modules/mozjpeg/vendor/cjpeg: error while loading shared libraries: libpng16.so.16: cannot open shared object file: No such file or directory
at Promise.all.then.arr (/www/xxxxxx/public/wp-content/themes/mytheme/node_modules/imagemin-mozjpeg/node_modules/execa/index.js:236:11)
at process._tickCallback (internal/process/next_tick.js:68:7)
Usually I don’t run build tasks on the remote (production) server for reasons like this. It looks like you’re missing a library that it’s using for image optimzation:
/www/xxxxxx/public/wp-content/themes/mytheme/node_modules/mozjpeg/vendor/cjpeg: error while loading shared libraries: libpng16.so.16: cannot open shared object file: No such file or directory
You can try removing node_modules and running yarn to reinstalled all your dependencies, but I think this may be an OS-level dependency which you would need to install on your remote OS (or get your host to install for you).
The process I would use in this case would be:
Set up local development environment
Copy the theme off of the remote server
Delete node_modules from the theme folder
Run yarn in the theme folder
Run yarn build:production
(optional) Debug/add dependencies as/if needed until yarn build:production runs successfully
Upload local version of site to remote (production) server (you don’t need to upload node_modules)