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

I wouldn't say it is exact but close, did you just use the import because that is not an option for me. — Jackie, Jan 14 '14 at 17:07
The other question doesn't mention anything about not having Ruby installed, as this one does. But if they are dupes, I'd prefer to see an answer here, and to close the other as a dupe of this, since this question is clearly worded. Usually Sass requires Ruby. Is it normal to have Grunt remove that dependency? — KatieK, Jan 15 '14 at 05:04
There are 2 versions of SASS, Ruby SASS and libSASS grunt-contrib-sass runs using ruby while grunt-sass uses node-sass which uses libsass. libsass is supposed to be faster because it is C(++?) based instead of Ruby (built on C). So yeah there is a bit of a difference I think I need to look into dynamic expansion per another post. — Jackie, Jan 15 '14 at 15:15

Jordan Foreman · Accepted Answer · 2014-01-16T13:50:16.670

24

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.

edited Jan 16 '14 at 13:50

answered Jan 15 '14 at 22:10

Jordan Foreman

3,848
7
40
65

7

I'm not sure why OP *can't* use `@import`, but to anyone seeing this...I'm pretty sure that is generally the preferred method. – Jordan Foreman Jan 15 '14 at 22:12
I would tend to agree, I was just not as familiar with how the sass framework handled linking(?). I do find it funny that the default behavior for sass seems to be to throw an exception whereas stylus creates too much css. – Jackie Jan 16 '14 at 01:41
I've actually never used stylus myself. I've updated my answer...maybe your `@import`s aren't right? – Jordan Foreman Jan 16 '14 at 13:51
9

If you have *.scss files broken up by modules, then you don't want to have to include them all in your `main.scss`, you just want Grunt to find them all via `src/**/*.scss` – Shane Stillwell Mar 11 '14 at 14:43
2

In the situation that you don't want to concat all your stylesheets into one file, you wouldn't want to use import. EG. You are building a custom wordpress app and want to load one style sheet for the login page, one style sheet for the admin, and one stylesheet for the front end. – Ken Prince May 02 '14 at 02:45
1

What about the source maps in this situation? – Ben Besuijen Sep 29 '15 at 09:00

score 15 · Answer 2 · answered May 03 '17 at 21:07

15

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!

answered May 03 '17 at 21:07

Aaron Olin

349
2
7

1

just what I was looking for - I just wanted to 'batch' process one folder of scss files into another folder of convert-to-CSS files without having to list all of them. Thanks. – J Sprague May 12 '17 at 19:04

score 2 · Answer 3 · answered Sep 29 '15 at 10:23

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

score 1 · Answer 4 · answered Dec 23 '15 at 04:06

1

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

answered Dec 23 '15 at 04:06

K.H.

1,383
13
33

3

"We don't have ruby installed so grunt-contrib-sass is not an option" . – pcarvalho Aug 04 '16 at 11:50

score 0 · Answer 5 · answered May 06 '16 at 08:55

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"
                    }
                };

Yes but what if I have 100 other scss files instead of 2? Then I have to do 100 imports rt? — Jackie, May 09 '16 at 18:37
yeah :), I suggest to you divide the project, I like the way this guy did look: https://github.com/douglasdeodato/lovelycss/tree/master/scss — raduken, May 09 '16 at 21:50

How to compile multiple scss files using grunt-sass

5 Answers5

Step 1: Create import file

Step 2: Compile your import file

Linked