search

bholloway / resolve-url-loader

Webpack loader that resolves relative paths in url() statements based on the original source file
563 stars 71 forks source link

URL:s in mixins are resolved relative to mixin declaration #74

Closed nip3o closed 6 years ago

nip3o commented 6 years ago

Let's say we have a file mixins/mixin.scss with the following content:

@mixin my-mixin($image) {
    background-image: url($image);
}

which is used from the file my-component/component.scss like this:

.component {
    @include my-mixin('./image.png');
}

In this case I would have assumed that image.png was loaded from the my-component folder, but it seems to be loaded from whatever folder mixin.scss is located in, i.e. mixins/image.png in this case. I discovered this only after setting the attempts setting to a low value, since the folder is basically irrelevant if unlimited attempts is possible.

Is this somehow by design, or is it a bug? I'll be happy to dig further into this and submit a sample project if you consider it a bug.

bholloway commented 6 years ago

I believe it is listed in the limitations in the readme.md

Try to compile a small sass file with the mixin into css with sourcemap. Check the source map from SASS. I think you will find the source map will show the mixin file at the point of the url statement.

It is really unfortunate limitation. I hope you can work around it.

nip3o commented 6 years ago

Yes, I realize now that the readme says that pretty clearly, I must have missed it somehow. Thanks for the quick response!

Dakkers commented 3 years ago

I can't believe that this is just a "known limitation". can you propose a SOLUTION? should I just copy and paste my mixin in every single file that needs it?

bholloway commented 3 years ago

Please try the @next version for V4. This is no longer a limitation. Hopefully V4 can be released soon. 🤞