Why do I need to Restart Ghost everytime I save my SASS files?

Themes
1

Hello,

I have started a new theme & I am using Gulp, Gulp-Sass & Node-Sass so far. I have just finished my Gulpfile.js & I have successfully gotten Gulp to recompile & watch my SASS files. Everytime I save my SASS files, gulp recompiles them & watches them, but ghost does not take the changes. I have to go into Ghost CLI & type ghost restart. Why is this?

Here is my gulpfile.js :

'use strict';
const gulp = require('gulp');
const { watch, series, parallel } = require('gulp');
const pump = require('pump');
const livereload = require('gulp-livereload');
const sass = require('gulp-sass');

function transpileSass(done){
    pump([
        gulp.src('./assets/sass/**.sass'),
        sass({outputStyle: 'compressed'}),
        gulp.dest('./assets/built/'),
        livereload()
    ], done());
}

function transpileHBS(done) {
    pump([
        gulp.src(['*.hbs', '**/**/*.hbs', '!node_modules/**/*.hbs']),
        livereload()
    ], done());
}
const sassWatch = () => {watch('./assets/sass/**', transpileSass)};
const hbsWatch = () => {watch(['*.hbs', '**/**/*.hbs', '!node_modules/**/*.hbs'], transpileHBS)};
const watching = parallel(sassWatch, hbsWatch);
const build = series(transpileSass, transpileHBS);
const dev = series(build, watching);
exports.default = dev;
1 Like
2

Can you provide more information? How are you starting ghost? What ghost version are you using? What environment are you running in? What os are you using?

3

Starting Ghost : Ghost CLI - ghost start & when I want a SASS file change to take effect, I use ghost restart
Ghost version : Newest with Ghost CLI
Environment : Local
OS : Windows 10

4

Hmm, can you check if hard reloading (ctrl+shift+r) fixes the issue? I use browsersync with my theme and I’ve noticed that sometimes the styles are really wonky until I manually refresh or hard refresh.

5

Are you using the {{asset}} helper to reference your CSS file in the handlebars template?

6

Yes, for the {{asset}} helper I have :
<link rel="stylesheet" type="text/css" href="{{asset "built/index.css"}}" />
in my default.hbs.

My gulpfile.js is sending the compiled CSS to :
assets/built/index.css

7

It would seem that vikaspotluri123 solution to hard refresh the browser with ctrl+shift+r is what works right now. I am not going to mark it as a solution yet though, just in-case there is another option.

It sure beats having to restart ghost everytime though! Thanks vikaspotluri123

8

You might try disabling the cache when you have devtools open:

9

Actually I’m seeing the same behaviour now, even with livereload enabled. Feels like something may have changed / broken.

@rishabhgarg would you be able to verify?

1 Like
10

Did some quick investigation and it does seem like browser live reload is not working on themes even with livereload enabled and always needs a manual refresh for changes to show up. Don’t think anything changed in Ghost to affect this, but will investigate further for what could be broken here.

1 Like
11

This still doesn’t work.

The asset helper adds a param which caches the file and that is what we are changing by restarting.

I checked it incognito and on another device and the old param is on the asset, one of these devices never saw that stylesheet and still recieved cached version.

If i just use a link with no param aka no asset helper it reloads as expected, bc gulp is reloading the file, but ghost isn’t updating the asset.

Edit: oops this thread is 2 years old I thought it was 2 months old. I may revise this into it’s own new thread tomorrow at work.