Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Icon font regression when using Vite #1381

Open
cernyjakub opened this issue Jul 20, 2022 · 16 comments
Open

Icon font regression when using Vite #1381

cernyjakub opened this issue Jul 20, 2022 · 16 comments
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@cernyjakub
Copy link

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 cernyjakub added the bug Something isn't working label Jul 20, 2022
@cernyjakub
Copy link
Author

Very likely, this is related to vitejs/vite#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
Copy link

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.

jarham added a commit to online-inquiry-tool/oit that referenced this issue Aug 25, 2022
@jarham
chore(deps): upgrade most deps up to major version
1c4a8b2 
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
@mdo
Copy link
Member

mdo commented Aug 28, 2022

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
Copy link

nCrazed commented Nov 18, 2022 •
edited
Loading

parcel.js is failing in similar way too: parcel-bundler/parcel#6285 except that the .css workaround doesn't seem to work

@nonsensation nonsensation mentioned this issue Feb 13, 2023
Open
7 tasks
@XhmikosR
Copy link
Member

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

@cernyjakub
Copy link
Author

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

@andymerskin
Copy link

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: vitejs/vite#13676 (comment)

@CatchABus
Copy link

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.

@XhmikosR XhmikosR reopened this Nov 20, 2023
@XhmikosR XhmikosR added the help wanted Extra attention is needed label Nov 20, 2023
@oussama-he
Copy link

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
Copy link

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
Copy link

@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
Copy link

No, I used:

vite 4.4.7
bootstrap-icons 1.11.1

@XhmikosR XhmikosR mentioned this issue Jan 12, 2024
Open
@jrd-lewis
Copy link

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
Copy link

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

@aaw20904
Copy link

aaw20904 commented Jun 20, 2024 •
edited
Loading

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.

@jeremy0519
Copy link

I suppose even adding @import 'bootstrap-icons/font/bootstrap-icons.css'; should be covered in the official usage documentation for people using Vite.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests