Btukfyl

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

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

   
   

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