react

create-react-appでvalidなCSSでもビルド時にエラーが出る


CreateReactApp編(1)|React使ってSPAを作るよ
CreateReactApp編(2)|React使ってSPAを作るよ

半年ぶりくらいにcreate-react-appを使っていてハマったのでメモしておきます。

新しいプロジェクトを作るのに、create-react-appなら簡単だしやったことあるし楽勝だろうとタカをくくってやりはじめたら、

でエラーが出てビルドできなくなっちゃいました。

srcディレクトリで書いていたCSSに

というショートハンドを書いていたのですが、ここがひっかかりました。

ちなみにこのurl()を空にする書き方は別に文法エラーにはならず、W3Cのバリデータもきっちり通ります。

でlocalhostを立ち上げるときも特にエラーは起きず、ブラウザ側もエラーが出ません。

ビルドの時だけ起こります。

原因を調べてみたら、ビルドするときに裏側で動いているpostcss-loaderの問題でした。

url()に画像パスを指定してビルドが通った場合の、バンドルされたcssコードには2パターンあります。

①http://~などのフルパスで画像を指定している場合は、url()の中身はそのまま記述されます。

②サンプルアプリのsrcなどに格納してバンドルする画像を相対パスで指定した場合は…

postcss-loader
base64エンコードされた文字列として記述されていました!

つまり、ここの処理で画像がないからエラーが起きてしまうというわけです。

CSSがvalidなのでなかなか原因がつかめませんでした。
地道に1つずつコメントアウトして「通る、通る、通らない、通らない、通る、通らない・・・」ってやって見つけました(ヽ´ω`)

わざわざurl()を空で書いておく事例はあまりないと思うので気にしなくても良いのですが、ソースコードがvalidなら問題なくビルドできるようにしてほしいな~と思います。

この設定のデメリットとして考えられるのは

  • 必ずバンドルされるディレクトリに画像をおかなければいけない
  • ちょっとだけ差し替えたいときにも毎回ビルドしないといけない
  • それが嫌ならreact-scriptの中身を調べて設定を変更しなければいけない

ということでしょうか。

さらに、ローカル環境と本番サーバでディレクトリ構造が違う場合、本番サーバでの画像のパスを相対で指定しても、結局ビルドするときにリソースファイルから見てその位置に画像がなかったらエラーになってしまいます。

ちなみに、これまで作ってたプロジェクトで気づかなかったのは、CSSをバンドルしていなかったからなんです。生のCSSファイルを、Laravelのview(header.blade.php)でHTMLのlink要素で普通に読み込んでいました。

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です