How to apply CSS changes in your Ghost theme

Have you ever edited a CSS file in your Ghost theme and then wondered why those changes didn't show up on your site?

With the new version of Ghost, you will need to do an important build step to apply the CSS changes.

All of Ghost theme from Themex Studio (and all official Ghost themes) compiles all CSS into a single minified CSS file. That’s done by a development tool called Gulp.

In this guide, you'll learn how to use the development tool Gulp to compile and apply changes in the CSS, so that you can make stylistic changes to your theme.

What's Gulp?

Gulp is a tool for streamlining your CSS, which is what determines your theme's style. It's a developer tool that makes your code more consistent and compatible.

All of the free and official Ghost themes and many premium themes use Gulp to compile CSS files. By learning just two commands, you'll have the knowledge you need to customize any theme that makes use of Gulp.

So if you're working with a Ghost theme and your CSS doesn't seem to reflect the changes you've been making, here's what you can do:

How to update and apply changes with CSS (and JS)

Here are key steps:

• You'll need Node, Yarn and Gulp installed globally
• After that, from the theme's root directory, run those command
  • yarn install to install all needed dependencies
  • yarn dev to build and watch for CSS changes
  • yarn zip to compile the CSS and upload to your Ghost site

Navigate to the theme's folder in your terminal. If you're using VS Code as your code editor, then you can use its built-in terminal.

If you haven't installed Node, you'll need to install it first.

After that, you need to install Yarn with this command:

sudo npm install -g yarn

Then, install Gulp and any other required software for your theme (dependencies), typing the following command in the terminal and hit enter.

yarn install

Once dependencies are installed, process the CSS to reflect the changes you made by running:

yarn dev

After updating the CSS files, run this final command to compile all the changes and use it to update your theme:

yarn zip

This command tells Gulp to pull together the changes made in your CSS files, optimize them, and add everything to a zip file located in the theme's dist folder.

The video below shows the commands in action:

You only need to run yarn install once to download the necessary dependencies in each theme. After that, just run yarn zip whenever you're making stylistic changes and want to upload a new version of your theme.

All that’s left to do now is to upload the zip file in Ghost Admin. Refresh your site and voilà – your changes are active!

Troubleshooting further: sometimes, you can get an issue where a yarn install errors out because gscan doesn't support the current version of node. These compatability issues are super frustrating! But you can switch to a lower version with nvm install 18 and then nvm run 18 and try again.

Sources:

• Compiling Ghost Themes (If Your CSS Isn't Updating)
• How to update CSS in a Ghost theme