Vue2 - Error: PostCSS received undefined instead of CSS string

Question

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)

score 29 · Accepted Answer · answered Sep 01 '21 at 11:48

29

Try it

npm install node-sass
or 
npm rebuild node-sass

I got answer for here

answered Sep 01 '21 at 11:48

grovskiy

749
5
12

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

score 15 · Answer 2 · answered Jan 17 '22 at 19:55

15

Solved by first uninstalling node-sass:

yarn remove node-sass

And then installing sass instead:

yarn add -D sass

answered Jan 17 '22 at 19:55

W.M.

589
1
6
13

1

adding sass worked for me. using nuxtjs to use scss lang in style – Pencilcheck May 18 '22 at 13:18

score 5 · Answer 3 · answered Dec 21 '21 at 14:45

5

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

npm install node-sass@4.14.1

answered Dec 21 '21 at 14:45

TrojanName

4,853
5
29
41

score 4 · Answer 4 · answered Dec 21 '21 at 13:16

4

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

answered Dec 21 '21 at 13:16

BILAL SURAWALA

71
7

score 1 · Answer 5 · answered Aug 09 '22 at 05:58

1

solved by switching to node v15.14.0

answered Aug 09 '22 at 05:58

doğukan

23,073
13
57
69

score 0 · Answer 6 · answered Aug 31 '22 at 14:59

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

score -1 · Answer 7 · edited Dec 16 '21 at 11:15

-1

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. :)

edited Dec 16 '21 at 11:15

hiddeneyes02

2,562
1
31
58

answered Dec 15 '21 at 09:30

Fantine R.

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: https://sass-lang.com/ – Dirk Schumacher Feb 21 '22 at 16:16

Vue2 - Error: PostCSS received undefined instead of CSS string

7 Answers7

Steps for npm & yarn