-
-
Notifications
You must be signed in to change notification settings - Fork 6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
url() with variable or relative path in sass/scss is broken #7651
Comments
The same can be said for less. |
To be absolutely strict:
|
Old version kept: - bootstrap-icons, 1.9 changed scss to use variables in font urls which broke compatibility with vite's scss processing. bootstrap-icons seems to have valid scss, so the actual problem is with Vite (and sass not supporting url rewriting). Importing bootstrap-icons.css could be used as a workaround. See: - twbs/icons#1381 - vitejs/vite#7651 - sass/sass#1015 - sass/sass#2535 - sass/sass#2927 Updated only up to minor version: - @types/node, still using Node 16 as it's the latest LTS at this time
This was closed as completed in #10741 but it has not been fully resolved. Paths with relative assets do not work correctly as described in the original issue description. |
@andyexeter Which one are you talking about? (I've described many cases in the original post) Would you create a reproduction for that? |
@sapphi-red I was talking about this one:
However, upon trying to create a reproducer it does in fact seem to be working as expected now. I suspect my issue is being caused by using Vite in a Symfony application with https://github.com/lhapaipai/vite-bundle Apologies :) |
@sapphi-red After some discussions with the maintainer of https://github.com/lhapaipai/vite-bundle, we have discovered that this is actually an issue with Vite itself and is something we have been able to replicate. I have created a reproducer here: https://github.com/andyexeter/vitejs-vite-2btrkm The issue is only present when the main.js file and other assets are moved into a top level In the reproducer you'll see a background-image: url('../../images/vite.svg'); This is correctly referencing the images directory two levels up, however the background image does not appear and the following message is displayed during an
The only way to get the background image to appear is by changing the path to: url('../images/vite.svg'); But this is incorrect and not relative to the Let me know if you want me to create a new issue for this. |
@andyexeter I see. It would be great if you create a new issue. |
This issue organizes many issues around relative url() in sass/scss and adds many information.
(Please convert to discussion if it should be a discussion.)
Related: #6618, #3164, #2993, #5337, #4269
Premise
sass does not support rebasing relative url (sass/libsass#532).
For example,
becomes
Also there is no API for custom rebasing (sass/sass#2535).
In
sass-loader
, this feature is not implemented. It presentsresolve-url-loader
for solution. This one rebases url after converted to css and uses sourcemaps to obtain the original file path.Current Vite's implementation
It is implemented by this
rebaseUrls
function.This function is called inside
importer
option which is passed to sass.But importer will only be called if it is not a relative import because of the resolve order.
Which means if a file is resolved by relative path,
rebaseUrls
functions won't be called.The example is below.
This is why #6618 only happened when alias is used. (So url won't be rebased if it is imported by relative path.)
Also
rebaseUrls
is doing the transform over sass files and this makes it unable to rebase url including variables likeurl($url)
(#3164, #2993, #5337).This can be mitigated by not transforming url which starts with a variable (#4269).
But it won't work if it is used like below.
Solutions
I suggest several solutions.
config.root
) is easily achieveable by doingrebaseUrls
after the content is transformed to css.rebaseUrls
even if it is imported by relative path.resolve-url-loader
.UrlRewritePostcssPlugin
can handle this.The text was updated successfully, but these errors were encountered: