Sage WP Engine and SFTP

Sorry to revive this post but it is related.

I have done a some more local development and I recently pushed some changes via SFTP to the WP Engine host, following the below routine:

  • composer install --no-dev
  • yarn build:production
  • SFTP upload all files except the node_modules folder

After I run the yarn build:production locally the styling of the site breaks, I notice a lot of my custom SCSS is not added (note: all the custom scss I’m adding to existing files like _header.scss and _global.scss).

I then upload all the files to the production server and it is also broken there. I then delete the /dist folder on the server to make sure that it’s not a caching issue and that doesn’t help either.

When I revert to running yarn build everything works fine.

I’ve had a look at this thread here - Compiled CSS doesn't work as it should in production

I’m using a different implementation of the mobile menu (using the old Bootstrap span element approach) - so I know it’s not related to that issue.

Any ideas on how I can go about debugging this?

I’m using Trellis/Bedrock/Sage locally and just deploying the theme folder with the edited view.php file as mentioned in my earlier post.


Update 1: I also noticed that after the production build, images loaded via css ("../images/foo.jpg") are then converted to src: url(/app/themes/mytheme/dist/font.eot) rather then src: url(/wp-content/themes/mytheme/dist/font.eot)

Is there a way to get it to change all instances of /app/ to /wp-content/ each time a yarn buid:production is run for example? I figured it would keep the relative urls the same rather then changing the ../ to /app/mytheme/.


Update: I found solutions to both of my issues, it appears I had “end of the day brain” at the time of posting this!

Solution 1: it was in fact the solution mentioned in the GitHub that fixed the issue (https://github.com/roots/sage/issues/2017) even though I’m not using that menu, you still need those variables in there.

Solution 2: I forgot to check my own notes, since my remote server doesn’t have bedrock it was simply a matter of running the below

 SAGE_DIST_PATH=/wp-content/themes/mytheme/dist/ yarn build:production

Many thanks.