13

i have this problem when trying to compile a Vue2 project

Syntax Error: Error: PostCSS received undefined instead of CSS string
 @ ./src/assets/sass/main.scss 4:14-233 14:3-18:5 15:22-241
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.202:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I have tried to rebuild the sass-loader with no success.

My node version is v16.6.1 My NPM version is 7.21.0

Webpack is 5.1.2 and the sass-loader version is 10.2.0

This is a VUE2 project and all started when i started a new Vue3 project and i had to upgrade the vue/cli but i cannot understand how to go back locally (if this is the problem)

7 Answers 7

28

Try it

npm install node-sass
or 
npm rebuild node-sass

I got answer for here

3
  • That helped for me but I had to follow the link where you got the answer from. I am running vuejs with webpack. Feb 21, 2022 at 19:50
  • @DirkSchumacher It's great.
    – grovskiy
    Feb 22, 2022 at 20:49
  • didn't work for me
    – theking2
    May 17, 2022 at 9:59
14

Solved by first uninstalling node-sass:

yarn remove node-sass

And then installing sass instead:

yarn add -D sass

1
  • 1
    adding sass worked for me. using nuxtjs to use scss lang in style May 18, 2022 at 13:18
4

I also faced the same error and after downgrading the node version it was fixed.

0
3

I resolved this issue by downgrading my version of "node-sass" to "^4.14.1":

npm install node-sass@4.14.1
1

solved by switching to node v15.14.0

0

enter image description here

Hey, I was following a tutorial about VueJS, and I had the same error, tried to rebuild node-sass it didn't work.

Then I saw that the lang used in the style balise was SCSS (in the App.vue) , I changed it to CSS and it worked. :)

1
  • 1
    Imho, this is not a solution if the features of SCSS are used. It has it's own syntax and css is fully compatible but not vice versa if I am informed correctly. Check here: sass-lang.com Feb 21, 2022 at 16:16
0

This error, Error: PostCSS received undefined instead of CSS string is being thrown by sass-loader.

One solution would be to reinstall sass-loader. By using the following steps, the sass compile error should be fixed.

Steps for npm & yarn

! Note: If you have node-sass installed, you will need to reinstall it as well, by using the following commands:

# npm
npm uninstall sass-loader node-sass
npm install sass-loader node-sass --save-dev

# yarn
yarn remove sass-loader node-sass
yarn add sass-loader node-sass --dev

To reinstall sass-loader run these commands:

# npm
npm uninstall sass-loader
npm install sass-loader --save-dev

# yarn
yarn remove sass-loader
yarn add sass-loader --dev

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.