Empty CSS File Output When Converting SASS to CSS Using GruntJS












1















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.



grunt convert-sass



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










share|improve this question

























  • Can you share your SASS file code as well please? I just tried your code with a minimal .scss file and it worked. Also, please share your folder structure. Thanks.

    – Gurtej Singh
    Nov 26 '18 at 3:34











  • @GurtejSingh I have added my sass files. Thank you

    – Hyosoka Poipo
    Nov 26 '18 at 3:38













  • Maybe this can help stackoverflow.com/questions/21118598/… you need to run grunt-contrib-concat first to have one file and then convert .

    – UserEsp
    Nov 26 '18 at 4:04











  • @UserEsp, Thank you for your suggestion. I will try it now

    – Hyosoka Poipo
    Nov 26 '18 at 4:08
















1















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.



grunt convert-sass



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










share|improve this question

























  • Can you share your SASS file code as well please? I just tried your code with a minimal .scss file and it worked. Also, please share your folder structure. Thanks.

    – Gurtej Singh
    Nov 26 '18 at 3:34











  • @GurtejSingh I have added my sass files. Thank you

    – Hyosoka Poipo
    Nov 26 '18 at 3:38













  • Maybe this can help stackoverflow.com/questions/21118598/… you need to run grunt-contrib-concat first to have one file and then convert .

    – UserEsp
    Nov 26 '18 at 4:04











  • @UserEsp, Thank you for your suggestion. I will try it now

    – Hyosoka Poipo
    Nov 26 '18 at 4:08














1












1








1








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.



grunt convert-sass



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










share|improve this 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.



grunt convert-sass



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







css sass gruntjs






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 26 '18 at 3:40







Hyosoka Poipo

















asked Nov 26 '18 at 3:13









Hyosoka PoipoHyosoka Poipo

58121334




58121334













  • Can you share your SASS file code as well please? I just tried your code with a minimal .scss file and it worked. Also, please share your folder structure. Thanks.

    – Gurtej Singh
    Nov 26 '18 at 3:34











  • @GurtejSingh I have added my sass files. Thank you

    – Hyosoka Poipo
    Nov 26 '18 at 3:38













  • Maybe this can help stackoverflow.com/questions/21118598/… you need to run grunt-contrib-concat first to have one file and then convert .

    – UserEsp
    Nov 26 '18 at 4:04











  • @UserEsp, Thank you for your suggestion. I will try it now

    – Hyosoka Poipo
    Nov 26 '18 at 4:08



















  • Can you share your SASS file code as well please? I just tried your code with a minimal .scss file and it worked. Also, please share your folder structure. Thanks.

    – Gurtej Singh
    Nov 26 '18 at 3:34











  • @GurtejSingh I have added my sass files. Thank you

    – Hyosoka Poipo
    Nov 26 '18 at 3:38













  • Maybe this can help stackoverflow.com/questions/21118598/… you need to run grunt-contrib-concat first to have one file and then convert .

    – UserEsp
    Nov 26 '18 at 4:04











  • @UserEsp, Thank you for your suggestion. I will try it now

    – Hyosoka Poipo
    Nov 26 '18 at 4:08

















Can you share your SASS file code as well please? I just tried your code with a minimal .scss file and it worked. Also, please share your folder structure. Thanks.

– Gurtej Singh
Nov 26 '18 at 3:34





Can you share your SASS file code as well please? I just tried your code with a minimal .scss file and it worked. Also, please share your folder structure. Thanks.

– Gurtej Singh
Nov 26 '18 at 3:34













@GurtejSingh I have added my sass files. Thank you

– Hyosoka Poipo
Nov 26 '18 at 3:38







@GurtejSingh I have added my sass files. Thank you

– Hyosoka Poipo
Nov 26 '18 at 3:38















Maybe this can help stackoverflow.com/questions/21118598/… you need to run grunt-contrib-concat first to have one file and then convert .

– UserEsp
Nov 26 '18 at 4:04





Maybe this can help stackoverflow.com/questions/21118598/… you need to run grunt-contrib-concat first to have one file and then convert .

– UserEsp
Nov 26 '18 at 4:04













@UserEsp, Thank you for your suggestion. I will try it now

– Hyosoka Poipo
Nov 26 '18 at 4:08





@UserEsp, Thank you for your suggestion. I will try it now

– Hyosoka Poipo
Nov 26 '18 at 4:08












2 Answers
2






active

oldest

votes


















0















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







share|improve this answer


























  • Hy Shiv Kumar. Thank you for you answer. I'm not using ruby or grunt-contrib-sass in this project. So it's different with your case. Thank you :-)

    – Hyosoka Poipo
    Nov 26 '18 at 4:14











  • can you check if cmd line working and you are getting css out of SCSS. run node-sass --output-style compressed -o main/css sass/style.scss

    – Shiv Kumar Baghel
    Nov 26 '18 at 4:41











  • welcome & happy coding :) :)

    – Shiv Kumar Baghel
    Nov 30 '18 at 3:36



















0














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





share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53474339%2fempty-css-file-output-when-converting-sass-to-css-using-gruntjs%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0















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







    share|improve this answer


























    • Hy Shiv Kumar. Thank you for you answer. I'm not using ruby or grunt-contrib-sass in this project. So it's different with your case. Thank you :-)

      – Hyosoka Poipo
      Nov 26 '18 at 4:14











    • can you check if cmd line working and you are getting css out of SCSS. run node-sass --output-style compressed -o main/css sass/style.scss

      – Shiv Kumar Baghel
      Nov 26 '18 at 4:41











    • welcome & happy coding :) :)

      – Shiv Kumar Baghel
      Nov 30 '18 at 3:36
















    0















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







    share|improve this answer


























    • Hy Shiv Kumar. Thank you for you answer. I'm not using ruby or grunt-contrib-sass in this project. So it's different with your case. Thank you :-)

      – Hyosoka Poipo
      Nov 26 '18 at 4:14











    • can you check if cmd line working and you are getting css out of SCSS. run node-sass --output-style compressed -o main/css sass/style.scss

      – Shiv Kumar Baghel
      Nov 26 '18 at 4:41











    • welcome & happy coding :) :)

      – Shiv Kumar Baghel
      Nov 30 '18 at 3:36














    0












    0








    0








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







    share|improve this answer
















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








    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Nov 26 '18 at 4:15

























    answered Nov 26 '18 at 4:10









    Shiv Kumar BaghelShiv Kumar Baghel

    1,4063820




    1,4063820













    • Hy Shiv Kumar. Thank you for you answer. I'm not using ruby or grunt-contrib-sass in this project. So it's different with your case. Thank you :-)

      – Hyosoka Poipo
      Nov 26 '18 at 4:14











    • can you check if cmd line working and you are getting css out of SCSS. run node-sass --output-style compressed -o main/css sass/style.scss

      – Shiv Kumar Baghel
      Nov 26 '18 at 4:41











    • welcome & happy coding :) :)

      – Shiv Kumar Baghel
      Nov 30 '18 at 3:36



















    • Hy Shiv Kumar. Thank you for you answer. I'm not using ruby or grunt-contrib-sass in this project. So it's different with your case. Thank you :-)

      – Hyosoka Poipo
      Nov 26 '18 at 4:14











    • can you check if cmd line working and you are getting css out of SCSS. run node-sass --output-style compressed -o main/css sass/style.scss

      – Shiv Kumar Baghel
      Nov 26 '18 at 4:41











    • welcome & happy coding :) :)

      – Shiv Kumar Baghel
      Nov 30 '18 at 3:36

















    Hy Shiv Kumar. Thank you for you answer. I'm not using ruby or grunt-contrib-sass in this project. So it's different with your case. Thank you :-)

    – Hyosoka Poipo
    Nov 26 '18 at 4:14





    Hy Shiv Kumar. Thank you for you answer. I'm not using ruby or grunt-contrib-sass in this project. So it's different with your case. Thank you :-)

    – Hyosoka Poipo
    Nov 26 '18 at 4:14













    can you check if cmd line working and you are getting css out of SCSS. run node-sass --output-style compressed -o main/css sass/style.scss

    – Shiv Kumar Baghel
    Nov 26 '18 at 4:41





    can you check if cmd line working and you are getting css out of SCSS. run node-sass --output-style compressed -o main/css sass/style.scss

    – Shiv Kumar Baghel
    Nov 26 '18 at 4:41













    welcome & happy coding :) :)

    – Shiv Kumar Baghel
    Nov 30 '18 at 3:36





    welcome & happy coding :) :)

    – Shiv Kumar Baghel
    Nov 30 '18 at 3:36













    0














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





    share|improve this answer




























      0














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





      share|improve this answer


























        0












        0








        0







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





        share|improve this answer













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






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 26 '18 at 4:19









        Hyosoka PoipoHyosoka Poipo

        58121334




        58121334






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53474339%2fempty-css-file-output-when-converting-sass-to-css-using-gruntjs%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            404 Error Contact Form 7 ajax form submitting

            How to know if a Active Directory user can login interactively

            TypeError: fit_transform() missing 1 required positional argument: 'X'