Error with Sass

[malbrecht13]

In Pluralsight Vue: Getting Started course:

Section 2, Getting Started with Vue Lession: Getting and Exploring the Sample Code

I followed all instructions in the video but I encounter an error when I run the command npm run serve:

INFO Starting development server... 98% after emitting CopyPlugin

ERROR Failed to compile with 1 errors 8:53:53 PM

error in ./src/app.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/sass-loader/lib/loader.js): Error: Cannot find module 'node-sass' Require stack:

• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/sass-loader/lib/loader.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/loader-runner/lib/loadLoader.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/loader-runner/lib/LoaderRunner.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/webpack/lib/NormalModule.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/webpack/lib/NormalModuleFactory.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/webpack/lib/Compiler.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/webpack/lib/webpack.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/@vue/cli-service/lib/commands/serve.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/@vue/cli-service/lib/Service.js

• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/@vue/cli-service/bin/vue-cli-service.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15) at Function.Module._load (internal/modules/cjs/loader.js:725:27) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at Object.sassLoader (/Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/sass-loader/lib/loader.js:46:72)

  @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=style&index=0&lang=scss& 4:14-415 14:3-18:5 15:22-423 @ ./src/app.vue?vue&type=style&index=0&lang=scss& @ ./src/app.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.1.5:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Is this an issue because I have different versions of vue, npm, and/or node? Thanks.

[klawrow]

The issue is with the node-sass package. The following workaround worked for me https://stackoverflow.com/a/64626556/8383670.

[klawrow]

Update: After looking at the error output again, I noticed that I needed Python 2.7 and MSBuild tools installed on my Win10 machine. I installed Python 2.7.18 (https://chocolatey.org/packages/python2) and installed MSBuild (https://stackoverflow.com/a/41783879/8383670), then rebooted my machine and all worked flawlessly.

[DangRock]

I'm not able to get this fix to work... are you using Node 15? Sounds like node-sass less than 5.0.0 is incompatible with Node 15, so I can't downgrade to 4.12.1. I'd rather not have to uninstall Node 15 for 14 if I don't have to. Anyone have a fix? Looks like 5.0.0 node-sass is deprecated... does that mean it won't be fixed?

[klawrow]

I'm not able to get this fix to work... are you using Node 15? Sounds like node-sass less than 5.0.0 is incompatible with Node 15, so I can't downgrade to 4.12.1. I'd rather not have to uninstall Node 15 for 14 if I don't have to. Anyone have a fix? Looks like 5.0.0 node-sass is deprecated... does that mean it won't be fixed?

I'm using Node 14.15.2. What have you tried so far? Are you on a windows or mac? Can you paste the exact errors you're getting?

[DangRock]

I'm not able to get this fix to work... are you using Node 15? Sounds like node-sass less than 5.0.0 is incompatible with Node 15, so I can't downgrade to 4.12.1. I'd rather not have to uninstall Node 15 for 14 if I don't have to. Anyone have a fix? Looks like 5.0.0 node-sass is deprecated... does that mean it won't be fixed?

I'm using Node 14.15.2. What have you tired so far? Are you on a windows or mac? Can you paste the exact errors you're getting?

Think I figured out the issue... for some reason, 'npm install sass-loader' was installing sass-loader@4.0.0. When running 'npm run serve', I would get an error saying node-sass 5.0.0 incompatible with sass-loader 4.0.0. I uninstalled that and installed sass-loader@10.1.0 and then made sure I have Node 15 and node-sass 5.0.0 and everything works now.