Почему @import меняет пути к изображениям?

Question

[ElenaSchleht]

Есть файл vendor.scss в нем через @import подключен lightbox.css.

@import "../../bower_components/lightbox2/dist/css/lightbox.css";

В стилях lightbox есть такая строка:

content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);

При компиляции @import меняет пути к изображениям и путь становится таким:

url(../../bower_components/lightbox2/dist/images/next.png)

А изображения у меня лежат по пути /images
Как можно решить эту проблему?

Благодарю за решение проблемы.

Answer 1

[Руслан Лопатин]

В документации сказано, что файлы CSS не импортируются. Вместо этого в финальный CSS вставляются директивы @import как есть.

Как решить? Не импортировать CSS. Например, можно переименовать/скопировать lightbox.css в _lightbox.scss, положить рядом с vendor.scss и импортировать инструкцией @import "lightbox";.

А вообще lightbox.css очень маленький. Можно его и вручную переделать. И пути какие надо подставить. Например, с помощью переменных