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.

回答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

回答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

回答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

&ast; credits to fabioluz for commenting this on github

来源：https://stackoverflow.com/questions/38658563/aurelia-cli-include-bootstrap-glyphicons

标签

aurelia

aurelia-cli