Can't include bootstrap-icons

[kefyru]

I'm trying to include bootstrap & bootstrap icons using bundle.scss:

@import "~bootstrap/scss/bootstrap.scss";
@import "~bootstrap-icons/font/bootstrap-icons.css";

bundle.html:

...
<link href="bundle.scss" rel="stylesheet"/>
...

bootstrap imports as expected,
but importing bootstrap-icons throws ENOENT: no such file or directory, open "{MyProjectFolder}/wwwsrc/fonts/bootstrap-icons.woff2"

[node-modules]/bootstrap-icons/fonts/bootstrap-icons.css:

@font-face {
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2?231ce25e89ab5804f9a6c427b8d325c9") format("woff2"),
  url("./fonts/bootstrap-icons.woff?231ce25e89ab5804f9a6c427b8d325c9") format("woff");
}

Is there any solution?

[DeMoorJasper]

sass doesn't support resolving urls relative to the file it's required from, so this isn't really a Parcel issue but more a scss issue

[larseggert]

Am having the same issue. Even if this isn't really a Parcel issue, is there a solution?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

[nCrazed]

Am having the same issue. Even if this isn't really a Parcel issue, is there a solution?

Seems to work if you prefix the relative node_modules path and import just the css like so:

@import "../node_modules/bootstrap-icons/font/bootstrap-icons.css";

[gimmi]

Seems that also vite users are affected by the same issue: vitejs/vite#11012

Anyway, a bootstrap-icon specific solution is to override $bootstrap-icons-font-dir variable:

$bootstrap-icons-font-dir: "../node_modules/bootstrap-icons/font/fonts"; // relative to the current file
@import "bootstrap-icons/font/bootstrap-icons.scss";

[vrkansagara]

Seems that also vite users are affected by the same issue: vitejs/vite#11012

Anyway, a bootstrap-icon specific solution is to override $bootstrap-icons-font-dir variable:

$bootstrap-icons-font-dir: "../node_modules/bootstrap-icons/font/fonts"; // relative to the current file
@import "bootstrap-icons/font/bootstrap-icons.scss";

// Bootstrap icons
$bootstrap-icons-font-dir: "bootstrap-icons/font/fonts";
@import "bootstrap-icons/font/bootstrap-icons.scss";

This is workd for me in vite project. FYI