How to compile multiple scss files using grunt-sass

Question

I am trying to compile multiple .scss files into a single CSS file. This actually works but only grabs the first file...

sass: {                                 // Task
   dist: {     
     files: {
       'css/test.css':'sass/*.scss'
     }

   }
}

We don't have ruby installed so grunt-contrib-sass is not an option. I do the same thing in Stylus like this...

stylus: {
  compile : {
    files : {
      'css/g.css' : 'stylus/*.styl'
    }
  }
}

Answer 1

What about running grunt-contrib-concat first?

concat: {
       dist: {
         src: [
           'sass/*.scss',
         ],
         dest: 'sass/build.scss',
       }
     },

sass: {                                 // Task
   dist: {     
     files: {
       'css/test.css':'sass/build.scss'
     }

   }
}

and then task:

grunt.registerTask('sass', ['concat', 'sass']);

edit

How are you using @import? I'm not an expert on the specifics, but here is what I do...

dir/

main.scss
_nav.scss
_vars.scss
etc.

main.scss

@import "nav";
@import "vars";
etc.

Answer 2

I just want to touch on this, because I had the same issue, and this will actually work:

    sass: { // Task
       dist: {         
         files: [{
             // Set to true for recursive search
             expand: true,
             cwd: 'scss/',
             src: ['**/*.scss'],
             dest: 'css/',
             ext: '.css'
         }]
       }
    }

Let me know how it goes!

Answer 3

You can use "grunt-sass-globbing". It will generate a SCSS file with all the imports you specified in your Gruntfile. https://www.npmjs.com/package/grunt-sass-globbing/

With this option you can keep your source maps and you don't need to concatenate your SCSS files.

Step 1: Create import file

sass_globbing: {
    your_target: {
        options: {
            useSingleQuotes: false,
            signature: '// Hello, World!'
        },
        files: {
            'imports.scss': 'partials/**/*.scss',
        }
    }
}

Step 2: Compile your import file

sass: {
    options: {
        sourceMap: true
    },
    develop: {
        files: {
            'main.css': 'imports.scss'
        }
    }
}

Answer 4

If you don't wanna use concat, you can specify all files in directory. Checkout this example: https://github.com/gruntjs/grunt-contrib-sass#compile-files-in-a-directory