Error: PostCSS received undefined instead of CSS string

webpackでsassをコンパイルするときに、以下のエラーが出るようになりました。

Error: PostCSS received undefined instead of CSS string

また、このエラーはreact.jsやvue.jsをコンパイルするときにも同じエラーが出ます。

この記事ではこのエラーの解消方法と原因を紹介します。

目次

エラーの解消方法はsass-loaderを再インストール

このエラーはsass-loaderが吐き出しているエラーです。

sass-loaderを再インストールすることで、sassのコンパイルエラーを解消できます。

再インストールする手順は以下の通りです。

  • sass-loaderをアンインストール
  • sass-loaderをインストール

上記の手順の再インストールは、以下のコマンドで行います。

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

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

node-sassも入れている方はnode-sassも再インストールする必要があります。

# 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

原因はnodeのバージョンに対応していないこと

このエラーはsass-loaderがnodeのバージョンに対応していない事によって吐き出されるエラーです。

グローバルのnodeのバージョンを上げたタイミングでこのエラーが出ます。
最新のnodeのバージョンはsass-loader11.1.1から互換性があります。

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

まとめ

webpackでsassをコンパイルするときに以下のエラーが出る原因は、sass-loaderがnodeのバージョンに対応していないからです。

Error: PostCSS received undefined instead of CSS string

このエラーを解消するにはsass-loaderを以下のコマンドで再インストールする必要があります。

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

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

node-sassも入れている方はnode-sassも再インストールする必要があります。

# 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
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

目次