Empty CSS File Output When Converting SASS to CSS Using GruntJS - css

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

check ruby with ruby -v (install ruby )
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');
};