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

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://me#bitbucket.org/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

Answer 3

I found the following error which led me to do a rebuild:
Error: Missing binding A:\Projects\Repos\chapelstudios_www\node_modules\node-sass\vendor\win32-x64-79\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 13.x
Found bindings for the following environments:
- Windows 64-bit with Node.js 10.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.

Answer 4

As Jake mentioned I tracked the error down to this line as well:
const sass = require('node-sass');
Running rebuild didn't work. I found that after upgrading node from version 10.x to current version (12.18 Windows) and then rebuilding fixed the issue.
npm rebuild node-sass