Sass is not compiling with patternlab node

Question

I am trying to set up the Node version of patternlab but I am unable to get Sass to compile.

Here is the gruntfile.js.

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    clean: {
        options: { force: true },
        files: ['./public/patterns']
    },
    concat: {
        options: {
            stripBanners: true,
            banner: '/* \n * <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy") %> \n * \n * <%= pkg.author %>, and the web community.\n * Licensed under the <%= pkg.license %> license. \n * \n * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. \n *\n */\n\n',
        },
        patternlab: {
            src: './builder/patternlab.js',
            dest: './builder/patternlab.js'
        },
        object_factory: {
            src: './builder/object_factory.js',
            dest: './builder/object_factory.js'
        },
        lineage: {
            src: './builder/lineage_hunter.js',
            dest: './builder/lineage_hunter.js'
        },
        media_hunter: {
            src: './builder/media_hunter.js',
            dest: './builder/media_hunter.js'
        },
        patternlab_grunt: {
            src: './builder/patternlab_grunt.js',
            dest: './builder/patternlab_grunt.js'
        },
        pattern_exporter: {
            src: './builder/pattern_exporter.js',
            dest: './builder/pattern_exporter.js'
        }
    },
    copy: {
        main: {
            files: [
            { expand: true, cwd: './source/js/', src: '*', dest: './public/js/'},
            { expand: true, cwd: './source/css/', src: '*.css', dest: './public/css/' },
            { expand: true, cwd: './source/images/', src: ['*.png', '*.jpg', '*.gif', '*.jpeg'], dest: './public/images/' },
            { expand: true, cwd: './source/images/sample/', src: ['*.png', '*.jpg', '*.gif', '*.jpeg'], dest: './public/images/sample/'},
            { expand: true, cwd: './source/fonts/', src: '*', dest: './public/fonts/'},
            { expand: true, cwd: './source/_data/', src: 'annotations.js', dest: './public/data/' }
            ]
        }
    },
    jshint: {
        options: {
            "curly": true,
            "eqnull": true,
            "eqeqeq": true,
            "undef": true,
            "forin": true,
            //"unused": true,
            "node": true
        },
        patternlab: ['Gruntfile.js', './builder/lib/patternlab.js']
    },
    watch: {
        scss: {
            options: {
                livereload: true
            },
            files: ['source/css/**/*.scss', 'public/styleguide/css/*.scss'],
            tasks: ['default']
        },
        all: {
            options: {
                livereload: true
            },
            files: [
            'source/_patterns/**/*.mustache',
            'source/_patterns/**/*.json',
            'source/_data/*.json'
            ],
            tasks: ['default']
        }
    },
    sass: {
        build: {
            options: {
                style: 'expanded',
                precision: 8
            },
            files: {
                './source/css/style.css': './source/css/style.scss',
                './public/styleguide/css/static.css': './public/styleguide/css/static.scss',
                './public/styleguide/css/styleguide.css': './public/styleguide/css/styleguide.scss',
                './public/styleguide/css/styleguide-specific.css': './public/styleguide/css/styleguide-specific.scss'
            }
        }
    },
    nodeunit: {
        all: ['test/*_tests.js']
    },
    connect: {
        app:{
            options: {
                port: 9001,
                base: './public',
                hostname: 'localhost',
                open: true,
                livereload: 35729
            }
        }
    }
});

// load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

//load the patternlab task
grunt.task.loadTasks('./builder/');

//if you choose to use scss, or any preprocessor, you can add it here
grunt.registerTask('default', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy']);

//travis CI task
grunt.registerTask('travis', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'nodeunit']);

grunt.registerTask('serve', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'connect', 'watch']);

};

The only modification I did to the gruntfile.js was uncomment the scss watch section. The .mustache templates compile correctly and auto-reloads in the browser. But when I make a change to a scss file in the source and save, my style change isn't reflected.

Answer 1

maintainer of Pattern Lab Node here.

You need to uncomment the sass tasks from the registered grunt tasks at the bottom of your gruntfile.

So for example:

grunt.registerTask('serve', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'connect', 'watch']);

becomes

grunt.registerTask('serve', ['clean', 'concat', 'patternlab', 'sass', 'copy', 'connect', 'watch']);

Pattern Lab Node ships with a "stenciled" implementation of scss files and tasks, as a demonstration of how to incorporate into your project for novice users. This has become a little more clear with newer versions of the README which you can find here: https://github.com/pattern-lab/patternlab-node/blob/master/README.md