CODEWITHSUNDEEP
sassgruntjs
Peter
Peter

Reputation: 38465

grunt writes content to console instead of file?

I am trying to add scss to my grunt file so i ran the following command: npm install grunt-contrib-sass sass --save-dev. Then i added the following to my Gruntfile.js

grunt.loadNpmTasks('grunt-contrib-sass'); and

grunt.initConfig({
...
sass: {
    dev: {
        files: {
            '<%=meta.src %>assets/css/all2.css': '<%=meta.src %>assets/scss/build.scss'
        }
    },

    dist: {
        files: {
            '<%=meta.dist %>/assets/css/all.min.css': '<%=meta.src %>/assets/scss/build.scss'
        }
    }
},

When i run this i get the output of the build.scss in the console and it creates a empty file?

What am i missing????

Running "sass:dev" (sass) task
#flupdidup {
  font-weight: bold;
}
Running "sass:dist" (sass) task
#flupdidup {
  font-weight: bold;
}
Done, without errors.
Process terminated with code 0.

a minimal recreation of the issue can be found here: https://github.com/Peter-Optiway/grunt-sass-issue

Upvotes: 0

Views: 236

Answers (2)

Tarun Lalwani
Tarun Lalwani

Reputation: 146510

Switching to grunt-sass was always an option, but your issue was not because of that. The issue was because you had sass install using npm. 

npm install -g sass

When you look at that 

$ sass --help
Compile Sass to CSS.

Usage: dart-sass <input>

-s, --style         Output style.
                    [expanded (default)]

-c, --[no-]color    Whether to emit terminal colors.
    --[no-]trace    Print full Dart stack traces for exceptions.
-h, --help          Print this usage information.
    --version       Print the version of Dart Sass.

It has no output parameter. While grunt-contrib-sass expects the sass to be install from the ruby gem.

$ sudo gem install sass

Now sass will have different options

$ sass --help
Usage: sass [options] [INPUT] [OUTPUT]

Description:
  Converts SCSS or Sass files to CSS.
...

And now the build works fine

$ cat ./dist/assets/css/all.min.css
main #flupdidup {
  font-weight: bold;
  background: #eeffcc; }

/*# sourceMappingURL=all.min.css.map */

Upvotes: 3

Peter
Peter

Reputation: 38465

I managed to fix the issue by changing to the grunt-sass package instead.

npm install --save-dev load-grunt-tasks load-grunt-tasks Then i added the following to my Gruntfile.js require('load-grunt-tasks')(grunt); and it just worked.

Upvotes: 0

Related Questions