Internal server error: Preprocessor dependency "sass" not found. Did you install it?

Question

I created a new VUE 3 and typescript application using vite. I later installed primevue and primeflex. When I run npm run dev, I get the error seen below:

How do I fix this? My repo, if that will shed light.

Answer 1

Install the sass package.

npm install --save-dev sass

Answer 2

Your repository does not show sass as a dev dependancy.

As mentioned by @justsomexanda, you should install the sass package to your dev dependency with your package manager of choice:

yarn add -D sass

# or:
npm add --save-dev sass

Then, stop and restart your dev server to make sure changes are taken into account:

yarn dev

# or:
npm run dev

Please note that HMR will not work directly after installing the sass package without restarting the dev server, leading to the error message you mentioned: "Preprocessor dependency "sass" not found. Did you install it?".

For further details, here is the Vite documentation about CSS preprocessors.

Answer 3

If you're using Vite JS and installing Sass for the project.

Follow the below commands to make it work:

1. npm add --save-dev node-sass OR yarn add --save-dev node-sass
2. npm add --save-dev sass OR yarn add --save-dev sass

Now run development and check.

Share errors in the comments if you're still getting any errors.

Answer 4

1. delete node_modules directory
2. delete package-lock.json
3. run npm i