Why does @import change image paths?

Question

css

There is a vendor.scss file in it, lightbox.css is connected via @import .

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

Lightbox styles have this line:

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

When compiling, @import changes the image paths and the path becomes this:

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

And the images I have are on the path /images
How can I solve this problem?
Thanks for solving the problem.

Answer 1

The documentation says that CSS files are not imported. Instead, the directives are inserted into the final CSS @importas is.
How to decide? Do not import CSS. For example, you can rename/copy lightbox.cssto _lightbox.scss, put next to vendor.scssand import the @import "lightbox";.
In general, lightbox.css is very small. You can also change it manually. And what paths should be set. For example, using variables