CSS changes don't seem to be updating

Themes
1

I’m currently working on customizing the base Casper theme (v 2.10.3).

Any changes I make to .hbs files update live in the browser, but any changes I make to the CSS files aren’t upadating, even if I stop and start ghost. Is there something I’m missing that needs to be done to build the CSS files?

Thanks!

2

Howdy there @macreddin :wave:
It depends on the theme you’re editing and what build tools it’s using to create the CSS. I’m guessing you might be trying to edit Casper? If so then Casper has a specific build process which you can read up about in it’s own readme file on GitHub:

3

Hey @DavidDarnes, you’re totally right, I missed that. Thanks!

1 Like
4

No worries! Happy coding :sparkles:

5

We’ve recently added a tutorial on how to use Gulp with Ghost themes. Gulp is the tool we use to help with compiling our CSS and JavaScript in themes such as Casper. The following tutorial explains how you can use it when editing Ghost themes and how to use it yourself from scratch:

1 Like
6

This link seems to be dead. Can you point out to the correct link if the tutorial still exists?

7
1 Like
8

Thanks.

You only need to run npm install once to download the necessary dependencies in each theme. After that, just run npm run 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!

So do I understand correctly that there is no real-time way to see the changes you make to your css file in your local environment at your http://localhost:2368/ ? In fact, I can not even gulp and see the changes locally. I actually have to create a zip file and upload it from the portal (again running locally) for each small change I make?

This does not make any sense if this is really how local development or small code editing works. I must be missing something here.

1 Like
9

You can absolutely see changes live. Run ‘gulp’ (not ‘gulp zip’) within the theme folder and it’ll live update. (You’ll still need to reload the page in the browser.

I do it all the time on my local dev install. Works great.

1 Like
10

Thank you for your swift response. I will do that. Appreciated!

11

Sure thing! I edit lots of themes, so if you get hung up, come on back! :slight_smile:

12

Thanks for the heads up, the URL must have changed since I posted it. Updated now

1 Like
13

I have gulp running in my theme and can’t see any change on browser reload. only the structural changes within *.hbs, but csswatcher doesn’t seem to work at all.
it only works when I run

sass sass/app.scss ../assets/css/app.css
sass sass/post.scss ../assets/css/post.css

14

Post the gulpfile? Sounds like it isn’t set up quite right for how you’re developing

15 
const {series, watch, src, dest, parallel} = require('gulp');
const pump = require('pump');

// gulp plugins and utils
var livereload = require('gulp-livereload');
var postcss = require('gulp-postcss');
var zip = require('gulp-zip');
var uglify = require('gulp-uglify');
// var beeper = require('beeper');

// postcss plugins
var autoprefixer = require('autoprefixer');
var colorFunction = require('postcss-color-mod-function');
var cssnano = require('cssnano');
var easyimport = require('postcss-easy-import');

function serve(done) {
    livereload.listen();
    done();
}

const handleError = (done) => {
    return function (err) {
        // if (err) {
        //     beeper();
        // }
        return done(err);
    };
};

function hbs(done) {
    pump([
        src(['*.hbs', '**/**/*.hbs', '!node_modules/**/*.hbs']),
        livereload()
    ], handleError(done));
}

function css(done) {
    var processors = [
        easyimport,
        colorFunction(),
        autoprefixer(),
        cssnano()
    ];

    pump([
        src('src/sass/*.scss', {sourcemaps: true}),
        postcss(processors),
        dest('assets/css/', {sourcemaps: '.'}),
        livereload()
    ], handleError(done));
}

function js(done) {
    pump([
        src('src/js/*.js', {sourcemaps: true}),
        uglify(),
        dest('assets/js/', {sourcemaps: '.'}),
        livereload()
    ], handleError(done));
}

function zipper(done) {
    var targetDir = 'dist/';
    var themeName = require('./package.json').name;
    var filename = themeName + '.zip';

    pump([
        src([
            '**',
            '!node_modules', '!node_modules/**',
            '!dist', '!dist/**'
        ]),
        zip(filename),
        dest(targetDir)
    ], handleError(done));
}

const cssWatcher = () => watch('assets/sass/**', css);
const hbsWatcher = () => watch(['*.hbs', '**/**/*.hbs', '!node_modules/**/*.hbs'], hbs);
const watcher = parallel(cssWatcher, hbsWatcher);
const build = series(css, js);
const dev = series(build, serve, watcher);

exports.build = build;
exports.zip = series(build, zipper);
exports.default = dev;

I never used Gulp before. but it is running without error. I thought paths could be a problem but when I change them gulp throws errors.

Bildschirmfoto 2023-02-09 um 13.05.33

16

Does this match where the css file you’re editing lives?

17

it did not. good eyey - thank you!
but unfort. this did not change anything. still does not work. :-/

18

I now go with npm run watch.

1 Like