Using node-normalize-scss with Grunt and Compass

Question

I would like to use normalize.scss with my project that's currently set up with Grunt to compile the SCSS using Compass.

I've found this, and have installed it using the command below (from here: https://www.npmjs.com/package/node-normalize-scss)

npm install node-normalize-scss --save-dev

Underneath that are config examples for gulp and grunt, but not for compass. I have tried using:

includePaths: require('node-normalize-scss').includePaths

And adding that to my Compass options in my GruntFile.js, but I get an error that starts a little like this:

Running "compass:dev" (compass) task Error: invalid option: --include-paths=/Applications/MAMP/htdocs/homepagev2/node_modules/node-normalize-scss

Usage: compass compile [path/to/project] [path/to/project/src/file.sass ...] [options]

Description: compile project at the path specified or the current directory if not specified.

After that I read that I can use a simple command to import that path so that in my .scss I can @import "normalize"

importPath: 'node_modules/node-normalize-scss/',

But using this I get an error saying

>> File "styles/sass/style.scss" changed. Local Npm module "node-normalize-scss" not found. Is it installed?

But it appears to be compilling normalize.scss into css, so I'm guessing it's kind of working.

Is there a better solution so I don't get the error on compile?

Thank you.

mcjim mcjim · Accepted Answer · 2016-11-19T13:08:52

I, too, had this problem, and eventually found the answer on here: https://github.com/gruntjs/grunt-contrib-compass

The option to use for compass (which takes completely different options to sass) is importPath, which you've found, and it works the same way.

So, importPath: require('node-normalize-scss').includePaths should, hopefully, work for you.

This is my current Gruntfile.js in full:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
    compass: {
            dist: {
                options: {
                    importPath: require('node-normalize-scss').includePaths,
                    sassDir: 'path/to/sass',
                    cssDir: 'path/to/css'
                }
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['compass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

Using node-normalize-scss with Grunt and Compass

1 Answers