Roots Discourse

How to get CSS changes applied to Sage theme


#1

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?

Running the latest WordPress build.


#2

Have you read through our documentation?

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.


#3

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


#4

You probably need to run yarn build:production.

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 without production 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.


#5

Thanks for that. That ran mostly, but did have a couple errors that I could use help with. This is what I get:

yarn build:production

yarn run v1.12.3

$ webpack --env.production --progress --config resources/assets/build/webpack.config.js

94% asset optimizationError: Command failed: /www/xxxxxx/public/wp-content/themes/mytheme/node_modules/mozjpeg/vendor/cjpeg -quality 75

/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)

error Command failed with exit code 1.


#6

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)

#7

For macOS:

For Linux: