Compiling SASS files using Grunt creates an unnecessary folder

Question

So I have been trying to create my first compiled css files using grunt and sass, and i am having a problem that I cant figure it out.

Every time that I run the sass task, an unnecessary "sass" folder is created inside of my css folder:

This is how it looks:

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
  watch:{
    sass:{
        files:['sass/*.scss'],
        task:['sass']
    }
  },
  sass: {
    dist: {
        files: [{
            expand: true,
            cwd: '',
            src: ['sass/*.scss'],
            dest: 'css/',
            ext: '.css'
        }]
      }
   }
});


grunt.loadNpmTasks('grunt-sass');

grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', ['sass']);

};

And this is how my folder looks after I run the task:

/SASS/somefile.scss
/CSS/SASS/somefile.css

The SASS folder it should not be there, the result i expect is:

/SASS/somefile.scss
/CSS/somefile.css

Thanks in advance!

Answer 1

Create a SASS folder under your CSS folder. Your somefile.scss file move into SASS folder then run.

like as :

CSS/

SASS/somefile.scss

Answer 2

The problem is due to your parameters for building the files object dynamically . You need to set the cwd parameter: "All src matches are relative to (but don't include) this path."

files: [{
    expand: true,
    cwd: 'sass/',
    src: '*.scss',
    dest: 'css/',
    ext: '.css'
}]