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をコピーしました!

エンジニアを目指す方必見!おすすめプログラミングスクール

最短でエンジニアになるには、いかに効率よく学習するかが重要です。モチベーションを維持しながら最短でエンジニアを目指すならプログラミングスクールを利用するのもおすすめです。

目次
閉じる