0

My directory structure is as follows:

example/
├── css/
│     ├── styles.css
├── img/
│     ├── background.jpg
└── src/
    ├── scss/
    │   ├── app.scss
    └── app.js

When I specify an absolute URL for a background image in app.scss, such as background-image: url("/img/background.jpg");, it will work just fine.

However, if I specify a relative URL, such as background-image: url("../img/background.jpg");, the build process will fail.

Is there a way to force Webpack to ignore such errors?

If it would just proceed to build my styles.css file, it would of course properly load the background via the relative URL, but I just can't ever get it that far.

It is important to resolve this because otherwise you are forced to deploy websites into the webroot and cannot use subdirectories as the absolute URL would break on production.

Thanks for your help.

Anonymous
  • 45
  • 1
  • 9

1 Answers1

1

it doesn't make sense to ignore file resolution errors in webpack and i don't think there is a way to do it.

but from your app structure, the relative path should ../../img/background.jpg

Update:

sorry got that wrong at the beginning, I was able to reproduce your issue with sass and sass-loader, turned out it's a common issue and there is a section for it in sass-loader, and they mentioned 2 solutions:

  • Add the missing url rewriting using the resolve-url-loader. Place it before the sass-loader in the loader chain.

  • Library authors usually provide a variable to modify the asset path. bootstrap-sass for example has an $icon-font-path

Community
  • 1
  • 1
d7my
  • 167
  • 1
  • 7