Stylesheets not showing up for Ionic App

angularjs, css, ionic-framework, webstorm

Solution

Making the following changes seemed to fix things, I also changed this into a template, but that had nothing to do with the fix:

<ion-side-menus>
<ion-side-menu-content class="has-header" ng-controller="NavCtrl">
    <ion-header-bar class="bar-positive">
        <div class="buttons">
            <button class="button icon button-clear ion-navicon-round"
                    ng-click="toggleLeft()"></button>
        </div>
        <h1 class="title" style="margin-left: 0">Roo</h1>
    </ion-header-bar>
</ion-side-menu-content>
<ion-side-menu side="left">

    <div class="list">
        <a class="item item-icon-left" href="#">
            <i class="icon roo-blue ion-home"></i>
            <i class="roo-blue">Current Location</i>
        </a>

        <a class="item item-icon-left" href="#">
            <i class="icon roo-blue ion-chatbubbles"></i>
            <i class="roo-blue">Messages</i>
        </a>

        <a class="item item-icon-left" href="#">
            <i class="icon roo-blue ion-plane"></i>
            <i class="roo-blue">Travel</i>
        </a>

        <a class="item item-icon-left" href="#">
            <i class="icon roo-blue ion-person"></i>
            <i class="roo-blue">Profile</i>
        </a>

        <a class="item item-icon-left" href="#">
            <i class="icon roo-blue ion-heart"></i>
            <i class="roo-blue">Interests</i>
        </a>

    </div>
</ion-side-menu>

Problem

I've built a small Ionic App in WebStorm using a simple tutorial for building a side-menu. It runs and everything when I bring it up in an emulator using Cordova, but none of the styling from Ionic seems to be working, even though it all appears to be part of my project and is referenced in the index file. ``` <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="js/services.js"></script> </head> <body ng-app="roo"> <ion-side-menus> <ion-side-menu-content ng-controller="NavCtrl"> <ion-header-bar class="bar-positive"> <div class="buttons"> <button class="button icon button-clear ion-navicon-round" ng-click="toggleLeft()"></button> </div> <h1 class="title">Sidemenu</h1> </ion-header-bar> </ion-side-menu-content> <ion-side-menu side="left"> <ion-list> <ion-item>Current Location</ion-item> </ion-list> <ion-list> <ion-item>Messages</ion-item> </ion-list> <ion-list> <ion-item>Travel</ion-item> </ion-list> <ion-list> <ion-item>Profile</ion-item> </ion-list> <ion-list> <ion-item>Interests</ion-item> </ion-list> </ion-side-menu> </ion-side-menus> </body> </html> ```

Original source