Beginning Aurelia Development

Help Requests
1

I’m starting the workshop portion of " Beginning Aurelia Development" on Vimeo and I am running into a couple of problems.

The first is related to the CSS style sheets. Since there’s no index.html in the project I generated, I included the style sheet links in index.ejs before the imported CSS comment.

In the Chrome console, I see the following errors.
localhost/:1 Refused to apply style from ‘http://localhost:8080/node_modules/bootstrap/dist/css/bootstrap.min.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:1 Refused to apply style from ‘http://localhost:8080/node_modules/font-awesome/css/font-awesome.min.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I assume this is due to a change in Chrome (Firefox had the same problem, but Edge did not). Is there something I have to add to my project or a setting in Chrome I need to change?

I encountered a 2nd problem, but that was due to a missing import of Welcome at the top of app.js.

1 Like
2

hi @rminnich! In Aurelia, instead of using stylesheets in the index.ejs, require them using aurelia so whichever bundler you are using will import it for you. For example, in your entrypoint (usually app.ts/app.html), add a <require from="bootstrap/dist/css/bootstrap.min.css"></require> to the entrypoint’s html.

3 Likes
3

you can also import them in the main.js file :

  import 'bootstrap/dist/css/bootstrap.css';
  import 'font-awesome/css/font-awesome.css';
2 Likes
4

I’m running into additional problems. I’m trying to implement the side nav bar starting at the 1 hour mark of the final video. I have actually copied the code from the solution to my project, but it’s still not rendering correctly. First, the settings nav link is present, but invisible. Second, instead of a vertical bar along the side, it’s a bar along the top that extends the width of the page. I’m using the author’s code.

Attached is my page as it renders. I circled where the settings link is.

aurelia notes screen
aurelia notes screen503×796 17.1 KB

Edit: I can get the author’s copy of the app to run. I needed to install the git client and change the format of gulp for npm to handle it.

I kid of fixed the settings icon not displaying by deleting the CSS for nav.main > ul > li:last-child.
I made the nav bar width smaller by adding width: 60px; to nav.main.

I’m still trying to make the nav bar rows not take up the top of the app below the header.

1 Like