tl;dr

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'

とエラーになってしまいます

さて、きちんとクォーテーションで囲い、パスもあっているはずなのですが、以下のようなエラーが出ました

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での依存関係の解決についてでした