How does Yarn build works when making changes on CSS? What files get edited?

sage
1

Ok, so as you know when you add stuff to a scss file and you want to see those changes, (assuming you are not using Browsersynch of course). You go ahead and run the command “yarn build” and then changes happen. My question is when you do that what files get edited?? The main reason I am asking this is that I do changes on _variables.scss and then yarn build and then I push using git to the production site, but for some reason, CSS changes don’t happen there, even if I do a “git status” (after running yarn build) it only show I’ve change _variables.scss. How can I update CSS on the production site properly?

2

You have to upload your “dist” folder to live site. After build production, the changes you made in your “assets” folder are compiled and stored in “dist” folder.

The “dist” folder servers content (css/js/fonts/images) on your site.

  • Please check the console log for path related issue with css/js/images.

Hope this helps…:+1:

3

The Roots stack is built on the “12-Factor App” philosophy. The reason I bring this up is that the “Build, Release, Run” part is specifically relevant to your question.

As @PrecisionCoder13 said, when you run yarn build your assets are compiled and deposited in your theme’s dist folder, removing whatever files were there previously–the contents of dist are meant to be transient, because they change every time you run a build. Because of this, the dist folder is in Sage’s .gitignore and therefore won’t be added to your repository (or appear when you run git status). The reason for this is that we generally discourage committing assets to your repository; it makes things like merge-conflicts more likely, and makes it easier for your source and compiled assets to fall out of sync. If you deploy with Trellis it will build and then push up your locally-built assets to the deployment target.

It looks like you’re using some kind of git deployment system, so you would need to configure that system to either run a build remotely when it receives a git push, or just remove dist from .gitignore and commit your assets.

If you’re deploying to an actual production server, I’d recommend running yarn build:production instead of simply yarn build, because it runs a number of production-specific optimizations on your assets.

1 Like
4

so would removing “Dist” from .gitignore be considered safe when trying to push from git? or am I better off just re uploading the whole folder to the live site? what would be considered best good practice? would that be what you recommended which is running [ yarn build:production instead of simply yarn build ] then do a git push?

5

Nope.
It’s dynamic folder generate on each build. And every time it generates content with random string in filename. So, if you remove the “dist” folder from “.gitignore”, it will become dump for your site. So, upload fresh “dist” folder after each build to you site.

Hope this helps…:+1:

6

This topic was automatically closed after 42 days. New replies are no longer allowed.