Sass on Grunt always creates an empty output

Question

I'm trying to compile SASS using grunt-contrib-sass, but I get an empty CSS file.

Here is the simplest package.json I could come up with to compile SASS/SCSS:

{
  "name": "sassgrunt",
  "version": "1.0.0",
  "scripts": {
    "sass": "node-sass"
  },
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-sass": "^1.0.0",
    "node-sass": "^4.7.2",
    "sass": "^1.0.0-beta.4"
  }
}

And this is about as simple as a SCSS file can get:

body {
    background: red;
}

And this gruntfile.js:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    './test.css': './test.scss'
                }
            }
        }
    });

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

If I execute grunt sass, it creates a brand new and empty test.css file.

I think I know why.

This command creates a perfectly okay test2.css from my source:

npm run sass test.scss test2.css

But this one just outputs the compiled CSS to the display and creates an empty file:

npm run sass test.scss

When I run grunt sass, that's exactly what I see. Which means that grunt-contrib-sass doesn't specify the command line correctly.

I don't understand why, because this setup is exactly what is shown in every example I've seen. Certainly, there must be something wrong with my setup, or everyone would have this issue?

Answer 1

There may be something else amiss, but I think grunt-contrib-sass is simply a dud.

I replaced it with grunt-sass, and it works perfectly with the same gruntfile setup. Just install using NPM or Yarn and replace grunt.loadNpmTasks('grunt-contrib-sass'); with grunt.loadNpmTasks('grunt-sass');.