sassgruntjsgrunt-contrib-sass

How to compile multiple scss files using grunt-sass


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'
    }
  }
}

Solution

  • 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.