Grunt file not building CSS file (SASS): Errno::ENOENT: No such file or directory # rb_sysopen - undefined - visual-studio

Question

I have a Grunt file, that should build my CSS file. When I run the task in the Task Runner (Visual Studio), I get below error:
Running "sass:dist" (sass) task Errno::ENOENT: No such file or
directory # rb_sysopen - undefined Use --trace for backtrace.
Warning: Exited with error code 1 Use --force to continue. Aborted
due to warnings. Process terminated with code 6.
My Grunt file:
module.exports = function (grunt) {
grunt.initConfig({
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'/css/styles.css': '/css/sass/styles.scss'
}
}
},
watch: {
css: {
files: ['css/sass/*.scss'],
tasks: ['sass'],
options: {
livereload: true,
},
},
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
My directory:
I use Visual Studio 2017 and have a standard ASP.NET Core project.
I read a bit, and it seems it could be the SASS cache. However, when I run the rm .sass-cache/ -R command, I get
rm: cannot remove '.sass-cache/': No such file or directory
Any ideas?

Answer 1

My guess is that there's confusion over what path you're starting from. I believe grunt runs from the project root, and wwwroot is a subfolder of that. Either prefix your paths in the grunt file with wwwroot/, or consider moving your .scss files out of wwwroot entirely, since they aren't intended to be served. They can go under the project root, and you can have grunt copy the .css outputs into wwwroot where they belong.