webpackでsassをコンパイルするときに、以下のエラーが出るようになりました。
Error: PostCSS received undefined instead of CSS stringまた、このエラーはreact.jsやvue.jsをコンパイルするときにも同じエラーが出ます。
この記事ではこのエラーの解消方法と原因を紹介します。
目次
エラーの解消方法はsass-loaderを再インストール
このエラーはsass-loaderが吐き出しているエラーです。
sass-loaderを再インストールすることで、sassのコンパイルエラーを解消できます。
再インストールする手順は以下の通りです。
上記の手順の再インストールは、以下のコマンドで行います。
# npm
$ npm uninstall sass-loader
$ npm install sass-loader --save-dev
# yarn
$ yarn remove sass-loader
$ yarn add sass-loader --devnode-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 --devnode-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
コメント