Can't get grunt-sass to build, outputs empty files

Question

So I have a grunt script which worked fine:

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dev: {
                options: {
                    sourceMap: false,
                    sourceComments: 'none',
                    errLogToConsole: true,
                    check: false,
                    precision: 1,
                    includePaths: [
                        '../Scripts/lib/bootstrap-sass-official/assets/stylesheets'
                    ],
                    outputStyle: 'nested'
                },
                files: {
                    '../Content/styles/output/ModellingContent.css': '../Content/styles/ModellingContent.scss',
                    '../Content/styles/output/Configure.css': '../Content/styles/Configure.scss'
                }
            },
            build: {
                options: {
                    sourceMap: false,
                    includePaths: [
                        '../Scripts/lib/bootstrap-sass-official/assets/stylesheets'
                    ],
                    outputStyle: 'compressed'
                },
                files: {
                    '../Content/styles/output/ModellingContent.css': '../Content/styles/ModellingContent.scss',
                    '../Content/styles/output/Configure.css': '../Content/styles/Configure.scss'
                }
            }
        },
        watch: {
            css: {
                files: '../Content/styles/**/*.scss',
                tasks: [
                    'sass:dev'
                ],
                options: {
                    spawn: false,
                    livereload: true
                }
            },
            shared_config: {
                files: '../Content/styles/global/_shared-vars.json',
                tasks: [
                    'shared_config',
                    'sass:dev'
                ],
                options: {
                    spawn: false,
                    livereload: true
                }
            }
        },
        shared_config: {
            default: {
                options: {
                    name: "globalStyle",
                    cssFormat: "dash",
                    jsFormat: "dash"
                },
                src: "../Content/styles/global/_shared-vars.json",
                dest: [
                    "../Content/styles/global/_shared-vars.scss",
                    "../Content/styles/global/_shared-vars.js"
                ]
            },
        }
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-preen');
    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-shared-config');

    grunt.registerTask('deploy', [
        'preen',
        'build'
    ]);

    grunt.registerTask('build', [
        'shared_config',
        'sass:build'
    ]);

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

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

But when I run this, grunt just stops in the sass:dev task and creates empty css files. This is what I get back in the console:

Running "shared_config:default" (shared_config) task
>> File: ../Content/styles/global/_shared-vars.scss created.
>> File: ../Content/styles/global/_shared-vars.js created.

Running "sass:build" (sass) task

I've reinstalled everything several times, but I can't figure out the problem.

score 0 · Answer 1 · answered Oct 14 '14 at 15:22

I don't know if this nesting is absolutely required, but when I use grunt-sass, I put files inside dist. The grunt-sass Usage example does that too.

So maybe the following sass:build definition would work for you:

        build: {
            options: {
                sourceMap: false,
                includePaths: [
                    '../Scripts/lib/bootstrap-sass-official/assets/stylesheets'
                ],
                outputStyle: 'compressed'
            },
            dist: {
                files: {
                    '../Content/styles/output/ModellingContent.css': '../Content/styles/ModellingContent.scss',
                    '../Content/styles/output/Configure.css': '../Content/styles/Configure.scss'
                }
            }
        }

score 0 · Answer 2 · answered Oct 15 '14 at 16:16

0

I figured out that I had a variable misconfigured. It was set to $size: $size. That it didn't report the error I suppose is a but, and it made me think it was something more serious.

answered Oct 15 '14 at 16:16

user1003572

151
1
1
4

Can't get grunt-sass to build, outputs empty files

2 Answers2