VS 2019 gruntfile.js no tasks found when using 'sass = require('node-sass')'

Question

I'm trying to set up grunt-sass for the first time on a new .Net Core 3.1 web app. I've gone through MSFT's steps to add grunt to a project here outlined here and then modified it with the steps from the grunt-sass instructions here.

This however causes task runner explorer to state there are no tasks found. Here is my package.json:

{
  "name": "chapelstudios_www",
  "version": "0.0.2",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://[email protected]/me/chapelstudios_www.git"
  },
  "author": "mr",
  "license": "ISC",
  "homepage": "https://bitbucket.org/me/chapelstudios_www#readme",
  "private": true,
  "devDependencies": {
    "grunt": "^1.0.4",
    "grunt-cli": "^1.3.2",
    "grunt-sass": "^3.1.0",
    "node-sass": "^4.13.1"
  },
  "dependencies": {
    "gulp": "^4.0.2"
  }
}

And this is my gruntfile.js:

const sass = require('node-sass');
require('load-grunt-tasks')(grunt);

module.exports = function (grunt) {
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // Sass
        sass: {
            options: {
                implementation: sass,
                sourceMap: true, // Create source map
                outputStyle: 'compressed' // Minify output
            },
            dist: {
                files: [
                    {
                        expand: true, // Recursive
                        cwd: "Styles", // The startup directory
                        src: ["**/*.scss"], // Source files
                        dest: "wwwroot/css", // Destination
                        ext: ".css" // File extension
                    }
                ]
            }
        }
    });

    // Load the plugin
    grunt.loadNpmTasks('grunt-sass');

    // Default task(s).
    grunt.registerTask('default', ['sass']);
};

I'm not sure how to get any more detailed error info then that but have tracked down the issue to the

const sass = require('node-sass');

line that is required by the grunt-sass instructions. If I change it to the string 'sass' that is recommended by older tutorials the task shows but fails when I attempt to actually run it.

I've also ran the following installations from an elevated powershell window in the project directory in an attempt to make sure they were installed into the project locally as I hear that to be a main issue:

npm install
npm install grunt
npm install grunt-cli
npm install --save-dev node-sass grunt-sass

At this point I'm out of ideas but I'm a newb so I'm sure I'm missing something obvious.

Answer 1

For anyone else visiting this with an existing project, I was having this issue with a pre-existing node-sass / grunt file on a new computer, and I found that bumping up the version of node-sass in my package.json caused VS to reinstall the packages and update the bindings as noted in the other answer.

I have a slight suspicion that there's a difference in versions between running grunt in my command prompt and whatever VS uses, since my grunt file worked just fine if I ran it manually, but would not show up in Task Runner Explorer.

Answer 2

Reviving an old topic but here is what worked for me. YMMV.

• In Visual Studio, go to: Tools -> Options -> Web Package Management -> External Web Tools.
• Move $(PATH) above $(VSInstalledExternalTools).

I have no idea if there are any side effects to doing this.

credit to: https://developercommunity.visualstudio.com/solutions/314606/view.html