How to compile multiple scss files using grunt-sass

Jackie picture Jackie · Jan 14, 2014 · Viewed 26.7k times · Source

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

Jordan Foreman picture Jordan Foreman · Jan 15, 2014

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.