Grunt : SCSS files not compiled - sass

Question

I am trying to compile scss files with grunt. Using theses modules
grunt-contrib-sass
grunt-contrib-watch
grunt-contrib-concat
that being said, all my regular css files gets compiled into my main css file but none of my .scss files does. I have tried to manually compile my files in command line and it does work fine (sass styles.scss:style.css), so it has nothing to do with my .scss or ruby. What am I doing wrong?
This is how my Gruntfile.js looks like
require('time-grunt')(grunt);
var jsFileList = [
'bower_components/slick-carousel/slick/slick.js',
'sources/js/dom_ready.js'
];
var cssFileList = [
'bower_components/bootstrap/dist/css/bootstrap.css',
'bower_components/slick-carousel/slick/slick.css',
'sources/sass/styles.scss',
'sources/sass/responsive.scss',
];
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'assets/css/styles.css': cssFileList
}
}
},
concat: {
options: {
separator: ';'
},
dist: {
src: jsFileList,
dest: 'assets/js/script.js'
}
},
watch: {
css: {
files: cssFileList,
tasks: ['sass'],
},
js: {
files: jsFileList,
tasks: ['concat']
}
}
});
grunt.registerTask('default', [
'sass',
'concat'
]);
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');

Answer 1

I found a way to do it using concat.
The first thing to do is to merge all you scss and css into one bigger scss files (which I called for convenience concat.scss).
Then you can generate that scss file using sass task.
This is how your Gruntfile.js should look.
var jsFileList = [
...
];
var cssFileList = [
...
];
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
js: {
src: cssFileList,
dest: 'sources/sass/generated/concat.scss'
},
css: {
src: jsFileList,
dest: 'assets/js/script.js'
}
},
sass: {
dist: {
options: {
noCache : true,
style: 'compressed',
sourcemap: "none"
},
files:{
'assets/css/styles.css' : 'sources/sass/generated/concat.scss'
}
}
},
watch: {
css: {
files: cssFileList,
tasks: ['concat','sass']
},
js: {
files: jsFileList,
tasks: ['concat']
}
}
});
grunt.registerTask('default',[
'concat',
'sass'
]);
grunt.registerTask('sass',['concat','sass']);
Your file structure should look like this
/root
/bower_components
...
/assets
/css
styles.css
/js
script.js
/sources
js
...
sass
/generated
concat.scss
/inc
...
/main
...
styles.scss