26

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'
    }
  }
}
3
  • 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, 2014 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, 2014 at 5:04
  • 1
    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, 2014 at 15:15

5 Answers 5

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.
6
  • 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. Jan 15, 2014 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, 2014 at 1:41
  • 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 Mar 11, 2014 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 2, 2014 at 2:45
  • 1
    What about the source maps in this situation? Sep 29, 2015 at 9:00
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!

1
  • 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, 2017 at 19:04
2

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

1
  • 3
    "We don't have ruby installed so grunt-contrib-sass is not an option" .
    – pcarvalho
    Aug 4, 2016 at 11:50
0

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.