# Beginning Aurelia Development

**URL:** <https://discourse.aurelia.io/t/beginning-aurelia-development/3274>\
**Category:** Help Requests\
**Created:** [February 27, 2020, 8:09am UTC](https://discourse.aurelia.io/t/beginning-aurelia-development/3274 "2020-02-27T08:09:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rminnich](https://avatars.discourse-cdn.com/v4/letter/r/b9e5f3/32.png) [@rminnich](https://discourse.aurelia.io/u/rminnich)\
**Post date:** [February 27, 2020, 8:09am UTC](https://discourse.aurelia.io/t/beginning-aurelia-development/3274/1 "2020-02-27T08:09:39Z")

</div>

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](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](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.

---

<div class="post-metadata">

**Author:** ![jbockle](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jbockle/32/607_2.png) [@jbockle](https://discourse.aurelia.io/u/jbockle)\
**Post date:** [February 27, 2020, 1:14pm UTC](https://discourse.aurelia.io/t/beginning-aurelia-development/3274/2 "2020-02-27T13:14:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![lancelot316](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lancelot316/32/527_2.png) [@lancelot316](https://discourse.aurelia.io/u/lancelot316)\
**Post date:** [February 27, 2020, 1:20pm UTC](https://discourse.aurelia.io/t/beginning-aurelia-development/3274/3 "2020-02-27T13:20:19Z")

</div>

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

```auto
  import 'bootstrap/dist/css/bootstrap.css';
  import 'font-awesome/css/font-awesome.css';

```

---

<div class="post-metadata">

**Author:** ![rminnich](https://avatars.discourse-cdn.com/v4/letter/r/b9e5f3/32.png) [@rminnich](https://discourse.aurelia.io/u/rminnich)\
**Post date:** [February 29, 2020, 3:25am UTC](https://discourse.aurelia.io/t/beginning-aurelia-development/3274/4 "2020-02-29T03:25:31Z")

</div>

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](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/1/104cfd07a1df6320e08705bd1ae9c6cde039d60e.png)

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.