Empty CSS File Output When Converting SASS to CSS Using GruntJS

Question

I'm trying to convert my sass file to css using gruntjs. This is my Gruntfile.js :

module.exports = function(grunt) {
    const sass = require('node-sass');
    // require('load-grunt-tasks')(grunt);
    // Configuration
    grunt.initConfig({
        // pass in options to plugins
        // refenrece to files etc
        sass: {
            options: {
                implementation: sass
            },
            dist: {
                files: [{
                    src: 'sass/*.scss',
                    dest: 'css/main.css'
                }]
            }
        }
    });


    // Load plugins
    grunt.loadNpmTasks('grunt-sass');


    // Register tasks
    grunt.registerTask('convert-sass', 'sass');    
}

When I run grunt convert-sass. The task is finished successfully. But the main.css is always empty.

Is there any other configuration that I missed ?

I have tried to add sourcemap: true and changed

files: [{ 'css/main.css': 'sass/*.scss' }] but it's still empty

These are my sass files (located in sass directory)

adimixins.scss :

@mixin vishovact ($link_color, $visit_color, $hover_color, $active_color) {
    a {
        color: $link_color;
        &:visited {
            color: $visit_color;
        }

        &:hover {
            color: $hover_color;
        }

        &:active {
            color: $active_color;
        }
    }
}

style.scss:

@import 'adimixins';

$base-color: #7FFFD4;
$second-color: #FF00FF;
$mybackground: #008B8B;

// Buat satu biji kelas
.adi-class {
    width: 100px;
    height: 80px;
    background: $mybackground;
    @include vishovact('blue', 'red', 'yellow', 'green');
    p {
        color: $second-color;
    }
}

*any help will be appreciated

Answer 1

Finally, after several trials. I realized that no need to convert the mixins.scss. Because it's already converted automatically. So I change the src: 'sass/*.scss' to src: 'sass/styles.scss', and it finally works. Here's the output of converted css file:

.adi-class {
  width: 100px;
  height: 80px;
  background: #008B8B; }
  .adi-class a {
    color: "blue"; }
    .adi-class a:visited {
      color: "red"; }
    .adi-class a:hover {
      color: "yellow"; }
    .adi-class a:active {
      color: "green"; }
  .adi-class p {
    color: #FF00FF; }

Answer 2

1. check ruby with ruby -v (install ruby )

2. Install Sass with sudo gem install sass (install sass )

   setting for Grunt Tasks & run grunt convert-sass

   module.exports = function (grunt) {
   
     grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
   
     sass: {
         dist: {
             options: {
               sourcemap: 'none'
             },
             files: [{
                 expand: true,
                 cwd: 'sass',
                 src: ['**/*.scss'],
                 dest: 'css',
                 ext: '.css'
             }]
            }
          }
   
       });
   
      // Load Grunt plugins
      grunt.loadNpmTasks('grunt-contrib-sass');
   
      // Register Grunt tasks
      grunt.registerTask('convert-sass', 'sass');
   };