Как вы заставляете Webpack игнорировать ошибки в разрешении URL в процессе сборки?

Question

Моя структура каталогов выглядит следующим образом:

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

Когда я указываю абсолютный URL для фонового изображения в app.scss, такие как background-image: url("/img/background.jpg");, это будет работать просто отлично.

Однако, если я укажу относительный URL, такой как background-image: url("../img/background.jpg");, процесс сборки не удастся.

Есть ли способ заставить Webpack игнорировать такие ошибки?

Если бы просто приступить к созданию моего styles.css файл, он, конечно, будет правильно загружать фон через относительный URL, но я просто не могу получить это так далеко.

Важно решить эту проблему, потому что в противном случае вы вынуждены развертывать веб-сайты в рут-корне и не можете использовать подкаталоги, поскольку абсолютный URL-адрес может нарушиться при работе.

Спасибо за вашу помощь.

Answer 1

Не имеет смысла игнорировать ошибки разрешения файлов в веб-пакете, и я не думаю, что есть способ сделать это.

но из структуры вашего приложения относительный путь должен ../../img/background.jpg

Обновить:

извините, я ошибся с самого начала, я смог воспроизвести вашу проблему с sass и sass-loaderОказалось, что это общая проблема, и есть раздел для этого в sass-loaderи они упомянули 2 решения:

• Добавьте отсутствующую перезапись URL-адреса с помощью resol-url-loader. Поместите его перед sass-loader в цепочке загрузчиков.

• Авторы библиотеки обычно предоставляют переменную для изменения пути ресурса. Например, у bootstrap-sass есть $icon-font-path