Search code examples
aurelia

Aurelia CLI include Bootstrap Glyphicons

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.

Solution

  • 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

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

    * credits to fabioluz for commenting this on github