icons
icons copied to clipboard
twbs
Icon font regression when using Vite
Hello!
I have been using icon font in Vite by simpley including 1 line in my SCSS file:
@import 'bootstrap-icons/font/bootstrap-icons';
After updating to 1.9, this is no longer working. I assume it is related to changes of font-path variables, hashes, etc. - as mentioned in #1378.
It would be super-cool to keep this compatibility.
Very likely, this is related to https://github.com/vitejs/vite/issues/7651 - Vite SASS processor is unable to peoperly rebase url() when there are variables in it (if I understand correctly).
So move from (1.8.3):
$bootstrap-icons-font-src: url("./fonts/bootstrap-icons.woff2?08efbba7c53d8c5413793eecb19b20bb") format("woff2"),
url("./fonts/bootstrap-icons.woff?08efbba7c53d8c5413793eecb19b20bb") format("woff") !default;
to (1.9)
$bootstrap-icons-font-src: url("#{$bootstrap-icons-font-file}.woff2?#{$bootstrap-icons-font-hash}") format("woff2"), url("#{$bo
otstrap-icons-font-file}.woff?#{$bootstrap-icons-font-hash}") format("woff") !default;
killed the Vite importer.
As a workaround, we can import the generated CSS like this:
@import 'bootstrap-icons/font/bootstrap-icons.css';
It skips SASS and in plain CSS the url() rebasing apparently works...
Can confirm this is still an issue regarding the latest versions. Using Vite and SASS, @import "~bootstrap-icons/font/bootstrap-icons"; which includes the SASS version, does in fact break. Workaround as mentioned, @import "~bootstrap-icons/font/bootstrap-icons.css"; does fix the issue.
Any idea what the Vite Sass compiler is doing that's different than the usual Sass compilation? We're not seeing any build errors on our end.
parcel.js is failing in similar way too: https://github.com/parcel-bundler/parcel/issues/6285 except that the .css workaround doesn't seem to work
I am still seeing the same erratic behavior, even after upgrading to 1.10.5
I know this is old, so not meaning to necro, but Vite 4.x changed the default charset to UTF-8 and recommends people ensure they're using the correct Content-Type header when serving CSS, as well as having your index.html include the <meta charset="utf-8 /> tag in your <head>, which should be default for Vite users anyway.
Thread: https://github.com/vitejs/vite/issues/13676#issuecomment-1612688039
This should be fixed in main and will be in v1.10.4.
I think this issue should be re-opened as the problem still persists.
I'm using version 1.11.2 with vite 4.4.11 and I have tried the workaround mentioned by @cernyjakub and @tyqualters and the issue persists.
I get this error in the console:
And this error in the server (Django server, vite server doesn't log anything):
Is there any news about this bug or other workarounds?
I use the workaround given by @cernyjakub and @tyqualters which is to include the plain css instead of the sass version.
I describe the same workaround in my blog How to Install Bootstrap in Laravel With Vite
This is far from ideal, I'd prefer to be able to use the sass version.
@jhjvandenbroek do you use the same versions (bootstrap-icons 1.11.2 and vite 4.4.11)?
The workaround doesn't work for me.