Whenever you fire up an instance of Ghost, you'll get a blog which out of the box uses the Casper theme.

I recently wrote about how I migrated my website to use Ghost(Pro) and Cloudflare. Part of that migration process involved picking a theme to use, and I opted for a custom theme which is based on Casper.

While developing the theme for this site we decided to use Sass for handling the style sheets. Casper happens to use vanilla CSS out of the box.

Assets in the Casper theme are managed by a gulp.js file which takes care of compiling and minifying the JavaScript and CSS files. I wanted to adopt the gulpfile process to compile the sass/scss files into css, so here is what I did.

Install gulp-sass

1. Add "gulp-sass": "4.0.2" to the devDependencies in your package.json
2. Run npm install to install gulp-sass

Modify gulpfile.js

Import gulp-sass:

const sass = require('gulp-sass');

Your gulpfile.js should include a css function that defines the behaviour for handling CSS files:

function css(done) {
    const processors = [
        easyimport,
        customProperties({preserve: false}),
        colorFunction(),
        autoprefixer(),
        cssnano()
    ];

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

We're now going to update the pump statement to source from *.scss files and invoke sass().

function css(done) {
    const processors = [
        easyimport,
        customProperties({preserve: false}),
        colorFunction(),
        autoprefixer(),
        cssnano()
    ];

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

There you go!

Now when you run yarn dev your *.scss files these will be compiled into CSS.

Note: At the time of writing this worked with the latest Casper theme – 3.0.12