Error: PostCSS received undefined instead of CSS string

I’m getting the following error when compiling sass with webpack.

Error: PostCSS received undefined instead of CSS string

This same error also occurs when compiling react.js and vue.js.

In this article, we will show you how to resolve this error and what causes it.

How to fix the error: reinstall sass-loader

This error is being thrown up by sass-loader.

By reinstalling sass-loader, you can fix the sass compile error.

The steps to reinstall it are as follows

To reinstall the above procedure, use the following command

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

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

If you have node-sass installed, you will need to reinstall node-sass as well.

# 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

The cause is that the version of node is not supported.

This error is caused by the fact that sass-loader does not support the node version.

You will get this error when you upgrade the global node version.
The latest version of node is compatible with sass-loader 11.1.1.

https://github.com/webpack-contrib/sass-loader/releases/tag/v11.1.1

Summary

The reason why you get the following error when compiling sass with webpack is because sass-loader does not support the node version.

Error: PostCSS received undefined instead of CSS string

To fix this error, you need to reinstall sass-loader with the following command.

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

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

If you have node-sass installed, you will need to reinstall node-sass as well.

# 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