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.

I'll play with this and check real quick. It may be that you need to submit a GitHub issue. — Ashley Grant, Jul 29 '16 at 13:43

score 6 · Answer 1 · answered Jul 29 '16 at 13:57

6

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

answered Jul 29 '16 at 13:57

Ashley Grant

10,879
24
36

score 3 · Answer 2 · edited May 23 '17 at 12:26

3

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

edited May 23 '17 at 12:26

Community

1
1

answered Oct 02 '16 at 11:47

JayDi

1,037
15
24

Randy · Accepted Answer · 2017-06-06T08:42:52.237

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

&ast; credits to fabioluz for commenting this on github

Aurelia CLI include Bootstrap Glyphicons

3 Answers3

Linked