search

twbs / icons

Official open source SVG icon library for Bootstrap.
https://icons.getbootstrap.com
MIT License
7.26k stars 1.06k forks source link

Icon font regression when using Vite #1381

Open cernyjakub opened 1 year ago

cernyjakub commented 1 year ago

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.

cernyjakub commented 1 year ago

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...

tyqualters commented 1 year ago

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.

mdo commented 1 year ago

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.

nCrazed commented 1 year ago

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

XhmikosR commented 1 year ago

This should be fixed in main and will be in v1.10.4.

cernyjakub commented 1 year ago

I am still seeing the same erratic behavior, even after upgrading to 1.10.5

andymerskin commented 8 months ago

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

CatchABus commented 7 months ago

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.

oussama-he commented 6 months ago

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:

image

And this error in the server (Django server, vite server doesn't log anything):

image

Is there any news about this bug or other workarounds?

jhjvandenbroek commented 6 months ago

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.

oussama-he commented 6 months ago

@jhjvandenbroek do you use the same versions (bootstrap-icons 1.11.2 and vite 4.4.11)? The workaround doesn't work for me.

jhjvandenbroek commented 6 months ago

No, I used:

vite 4.4.7 bootstrap-icons 1.11.1

jrd-lewis commented 1 month ago

Still an issue with vite 5.0 and bootstrap-icons 1.11.3; but the workaround of using the compiled css still works in the interim.

lucasalvesa commented 3 weeks ago

Does anyone have a different solution or workaround to this very same problem?

aaw20904 commented 2 weeks ago

I have the same problem with "bootstrap-icons.min" file. I wrote direct path, but I had no success: "Internal server error: Failed to resolve import "D:/web-work/vite_react_lrn/node_modules/bootstrap-icons/font/fonts/bootstrap-icons.min.css" from "src/App.jsx". Does the file exist?". I decided to export only font in a .css file : @font-face{ font-display: swap; font-family: 'Icons'; font-style: normal; font-weight: 400; src: url('../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2') format('woff2'); }
It works!

and styling in .CSS the tag: color, font-size e.t.c. I inserting HTML codes (code point,or unicode, they are available on the Bootstrap-icons site for each icon) inside the "I" html tag that represents type of the Icon.