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

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;

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?

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

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.

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

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

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

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

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?

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.