Aurelia - External Requires

Question

Brand new to Aurelia, and beginning to fall in love with it. I'm confused about how to include external URL's into a view however. For instance,

<template>
  <require from="css/bootstrap/bootstrap.css"></require>
  <require from="fonts/font-awesome-4/css/font-awesome.css"></require>
  <require from="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,400italic,700,800"></require>
  <require from="http://fonts.googleapis.com/css?family=Raleway:300,200,100"></require>
  <require from="css/style.css"></require>

  <div class="page-host">
    <router-view></router-view>
  </div>
</template>

I keep getting the error:

Uncaught SyntaxError: Unexpected token ILLEGAL
Evaluating http://fonts.googleapis.com/css?family=Raleway:300,200,100.js
Error loading http://fonts.googleapis.com/css?family=Raleway:300,200,100.js

Am I doing the require wrong for an external CSS or JS file?

Answer 1

The require tag is trying to load an Aurelia ViewModel, not just doing a generic text import.

As Aurelia is a Single Page Application, it's quite possible to load the external CSS / fonts from inside your index.html using the traditional HTML methods and you will still have access to them on your other views.

If you take a look at the skeleton app that's precisely how they do it.