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

it's very simple.

let's say you have this structure with 2 scss files:

   scss/
       core/file.scss
       templates/file2.scss
       main.scss

so what you need to do is: create a file called: main.scss in your root scss folder and import all your scss files:

e.g.: main.scss will have:

@import "core/file.scss"
@import "templates/file2.scss"

now use grunt-contrib-sass and just call the main.scss file:

done :)

//Sass ===============================
            var sass;
            config.sass = sass = {};

                //production
                    sass.dist = {
                        options: { style: "compressed"}
                        , files: {
                            "public/stylesheets/myapp.production.css" : "sass/main.scss"
                        }
                    };

                //development env.
                    sass.dev = {
                    options: { style: "expanded", lineNumber: true}
                    , files: {
                        "public/stylesheets/myapp.development.css" : "sass/main.scss"
                    }
                };

Answer 3

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

Answer 4

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 5

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