tl;dr
- 404エラーが出た場合はurl内をクォーテーションで囲う
- Cannot found moduleエラーが出た場合はCSSをJSで読み込むようにする
404エラー
ParcelでSassを書いている時、背景画像を読み込もうとしたら404エラーが出ました
body {
background-image: url(../assets/images/background.png);
}
> GET http://localhost:4300/assets/images/background.png 404 (Not Found)
ParcelではCSS内での画像などの参照は'（クォーテーション）で囲んだものをアセットとして/dist内にコピーし、そうでないものは外部ファイルとしてそのまま通すようです
そのため、/distにコピーさせたいファイルの場合は
background-image: url('../assets/images/background.png');
というようにクォーテーションで囲み、CDNなどで配信されているものを指定する時は
background-image: url(/assets/images/background.png);
とクォーテーションなしで書くのが良さそうです
そもそも、クォーテーションありの場合は依存関係を解決しようとするため、絶対パスなどで同一ドメインから配信されるファイルを参照しようとすると
> Cannot resolve dependency './../../../../../../../assets/images/background.png' at '/assets/images/background.png'
とエラーになってしまいます
（http://などで始まる場合は有無に関係なく依存関係の解決はされません）
Cannot find moduleエラー
さて、きちんとクォーテーションで囲い、パスもあっているはずなのですが、以下のようなエラーが出ました
background-image: url('../assets/images/background.png');
> main.9f57420d.js:39 Uncaught (in promise) Error: Cannot find module 'background.2bfd8f6a.png,18'
このエラーが出る場合は、HTMLからCSSを呼び出しているのが原因です
<!-- index.html -->
<style rel="stylesheet" href="./styles/main.sass" />
依存関係を解決させたい場合はJS内にCSSをimportしなければいけません
// main.js
import '../styles/main.sass';
以上で依存関係は正しく解決されるようになります
終わりに
普段通りに書いていたら難儀してしまうCSSでの依存関係の解決についてでした