aurelia-cli css resource failed to load

Question

I'm trying to create an <map> element with leaflet. I have added the dependencies in the aurelia.json file from aurelia-cli, the same as I did already for bootstrap before.

{
    "name": "leaflet",
    "path": "../node_modules/leaflet/dist",
    "main": "leaflet",
    "resources": [
        "leaflet.css"
    ]
}

github link

When I run the app with "au run", the leaflet.css file is correctly integrated in the vendor bundle file.

But when trying to require this file in my map element I get the error:

"Unhandled rejection Error: Failed loading required CSS file: leaflet/leaflet.css

The map.html file looks like this:

<template>
    <require from="leaflet/leaflet.css"></require>
    <div ref="mapNode" style="height: 100%"></div>
</template>

github link

I can't see the difference to the bootstrap package, which works without any problem.

After moving the leaflet dependency before that of bootstrap 4, everything seems to work correctly. github link

Is it possible that bootstrap breaks the requirejs lib or the text plugin?

JayDi JayDi · Accepted Answer · 2016-10-04T16:07:09

It's resource plugin fail - sometime after new adding of css-resources to aurelia config file it can't work correct (I'm using bootstrap v4 too).

Solution: go to aurelia.json config file and change loader text plugin stub to false like that:

"loader": {
  "type": "require",
  "configTarget": "vendor-bundle.js",
  "includeBundleMetadataInConfig": "auto",
  "plugins": [
    {
      "name": "text",
      "extensions": [
        ".html",
        ".css"
      ],
      "stub": false
    }
  ]
},

aurelia-cli css resource failed to load

1 Answers