grunt-contrib-sass not compiling css file

Question

I am pretty new to grunt. I've just set up a grunt project, basiscally follwing this tutorial: Setting up Sass with Grunt. My directory structure differs a bit but so far I've accomplished to get the tasks defined in my gruntfile running - at least executing $ grunt --verbose gives me no errors and any any time I change one of the scss files defined as my sources the watch task gets triggered. However, no css file is being produced.

My package.json looks like this:

{
    "name": "grunt-test",
    "version": "1.0.0",
    "description": "bootstrap sass and javascript compilation",
    "main": "index.js",

    "repository": {
         "type": "git",
         "url": ""
    },
    "keywords": [],
    "author": "Me",
    "license": "",
    "devDependencies": {
        "grunt": "^0.4.5",
        "grunt-contrib-sass": "^0.8.1",
        "grunt-contrib-uglify": "^0.6.0",
        "grunt-contrib-watch": "^0.6.1",
        "matchdep": "^0.3.0"
    }
}

My GruntFile.js:

'use strict';

module.exports = function(grunt) {

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),
        project: {
            app: '../app',
            assets: '<%= project.app %>/assets',
            src: 'bower_components/bootstrap-sass-official/assets',
            scss: [
                '<%= project.src %>/stylesheets/_bootstrap.scss'
            ],
            js: [
                '<%= project.src %>/javascripts/bootstrap.js',
                '<%= project.src %>/javascripts/bootstrap/*.js'
            ]
        },
        tag: {
            banner: '/*!\n' +
            ' * <%= pkg.name %>\n' +
            ' * <%= pkg.title %>\n' +
            ' * <%= pkg.url %>\n' +
            ' * @author <%= pkg.author %>\n' +
            ' * @version <%= pkg.version %>\n' +
            ' * Copyright <%= pkg.copyright %>. <%= pkg.license %> licensed.\n' +
            ' */\n'
        },
        sass: {
            dev: {
                options: {
                    sourcemap: 'auto',
                    style: 'expanded',
                    banner: '<%= tag.banner %>',
                    compass: false
                },
                files: {
                    '<%= project.assets %>/stylesheets/bootstrap.css': '<%= project.scss %>'
                }
            },
            dist: {
                options: {
                    sourcemap: 'auto',
                    style: 'compressed',
                    compass: false
                },
                files: {
                    '<%= project.assets %>/stylesheets/bootstrap.css': '<%= project.scss %>'
                }
            }
        },
        watch: {
            sass: {
                files: '<%= project.src %>/stylesheets/{,*/}*.{scss,sass}',
                tasks: ['sass:dev']
            }
        }

    });

    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    grunt.registerTask('default', [ 'sass:dev', 'watch' ]);

}

As one can see my directory structure differs a bit to the one used in the tutorial due to how I set up my project. The compilation target is outside my project-directory (../app/assets) and the source is within bower_components. The sources seem to get recognized correctly. But what's wrong about my target definition? I was assuming that the compiler would pickup what's defined in project.scss and compile it to <%= project.assets %>/stylesheets/bootstrap.css.

Even though grunt --verbose tells me that tasks have been executed with no errors no css file(s) are being produced. What am I doing wrong?

Any hints highly appreciated,

Stefan

Answer 1

To answer my question: I found the detail that was missing in this blogpost. In that article the author explicitly mentions the creation of a style.scss (could be named whatever I guess) in which she links the bootstrap directory containing the sass files (*.scss) with an @import.

That did the trick. I guess it's about the _ prefixing. When using @import the scss file that's being addressed in my Gruntfile must not begin with an underscore, right? (I haven't tried different variants as what I wanted was simply solved)