Aurelia CLI include Bootstrap Glyphicons

Question

I'm trying to include Bootstrap in my Aurelia CLI project, and the CSS and JS work fine.

The only problem I have is the glyphicons require font files to be loaded.

I use this configuration:

"dependencies": [
    {
        "name": "bootstrap",
        "path": "../node_modules/bootstrap/dist",
        "main": "js/bootstrap.min",
        "deps": ["jquery"],
        "exports": "$",
        "resources": [
          "css/bootstrap.min.css",
          "fonts/glyphicons-halflings-regular.woff2"
        ]
    }
]

But I get an error containing this line:

path: 'C:\Users\randy\Documents\form\node_modules\bootstrap\dist\fonts\glyphicons-halflings-regular.js'

So even though I include the .woff2 file, Aurelia tries to import the file as a JS file. What can I do to make this work? CSS does work fine.

Answer 1

It looks like this is a bug in the current version of the Aurelia CLI. I've submitted an issue for you here: https://github.com/aurelia/cli/issues/248

Answer 2

Aurelia can't process font files. You must use manual bundle task for it.

Here is similar solution for font-awesome: https://stackoverflow.com/a/39544587/1276632

Here is solution for glyphicons (I used it for bootstrap v4 integration): https://github.com/aurelia/cli/issues/248#issuecomment-250967074

Answer 3

This has been solved, for more information read the Github issue.

This issue can now be solved by adding a copy instruction in the aurelia.json.

aurelia.json - valid if the project was created by aurelia-cli 0.25.0 or greater

Add the following in the build block:

"bundles": [ ... ], 
"copyFiles": {
  "node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2": "bootstrap/fonts",
  "node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff":  "bootstrap/fonts",
  "node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf":   "bootstrap/fonts"
}

---

If the project was created by an older CLI version, you will have to create the copy task inside the tasks folder

• https://github.com/aurelia/cli/blob/master/lib/resources/tasks/copy-files.js.

After that, call the copy task in the build.js/ts task

• https://github.com/aurelia/cli/blob/master/lib/resources/tasks/build.js#L15

---

* credits to fabioluz for commenting this on github