Adding Sass to your Gruntfile

Mar 17, 2020 | John Cornelius, Web Development

Sass is great for so many reasons. One being that their logo looks like it belongs in an 80s fashion ad.
But more importantly, it’s a great tool for organizing your project’s styles. It stands for Syntactically Awesome Style Sheets and I think it lives up to that name.

When I first started using Sass, I followed the site’s directions and ran a watch command in the terminal. That works great, but it’s annoying. You have to check your project each time you run the command to find the file name and path of your Sass and CSS files.

Lucky for me, a coworker introduced me to grunt and showed me how to create a Gruntfile that would keep track of and compile my Sass into CSS.

It’s super easy and the docs are great!

I start with creating Gruntfile.js. I like to put it in the root of my project directory, so that when I run the grunt command in my terminal, it’s super convenient and I don’t have to cd a million times through my project.

Here’s an example of a Gruntfile that only compiles Sass:

module.exports = function(grunt) {

    // task configurations
        pkg: grunt.file.readJSON('package.json'),

         * Sass
                    style: 'expanded'
                    '_assets/styles.css'   : '_assets/scss/main.scss'


         * Watch
                files: ['_assets/scss/**'],
                tasks: ['sass']

    // npm modules

    // grunt tasks
    grunt.registerTask('default', ['sass', 'watch']);

You’ll also need to add Grunt to your package.json.

"devDependencies": {
"grunt": "^1.0.1",
"grunt-cli": "^1.2.0",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-watch": "^1.0.0"

Next, you need to install grunt locally and install your dependencies which is explained simply in the grunt.js docs.

The last thing to do is run “grunt” in the terminal in the

Share This