Question

我在WebStorm中使用一个简单的教程构建了一个小型的Ionic App，用于构建侧边菜单。当我在使用Cordova的模拟器中启动它时，它运行和所有内容，但Ionic的样式似乎都没有工作，即使它看起来都是我的项目的一部分并在索引文件中引用。

<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>

App running in Cordova

Answer 1

进行以下更改似乎解决了问题，我也将其更改为模板，但这与修复无关：

<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>

Answer 2

我在遵循以下链接的官方离子指南时遇到了类似的问题。 http://www.ionicframework.com/docs/guide/

不明白为什么CSS文件没有在应用程序中使用。

样式表没有出现在Ionic App中

2 个答案: