Meteor and Ionic css not applied

Question

I would like to use the meteoric package to create a very simple app with meteor and the ionic framework. Using the guide, I created the following very simple app:

Router.js:

Router.configure({
  layoutTemplate: 'layout'
});

Router.route('/', function () {
  this.render('MyTemplate');
});

Templates.html:

<template name="layout">
    {{#ionBody}}
        {{> ionNavBar}}

        {{#ionNavView}}
            {{> yield}}
        {{/ionNavView}}

    {{/ionBody}}
</template>

<template name="myTemplate">
    {{#ionContent}}
        Hello World!
    {{/ionContent}}
</template>

The app loads without errors, and shows the content "Hello World!" without any styling at all. For example, why is the iosNavBar not being shown?

Answer 1

Look at the installation instructions for ionic-sass: https://github.com/meteoric/ionic-sass

It says:

in your app's .scss file:

@import '.meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/ionic';

So in your meteor application, create a style.scss file with the above import statement. Now you should see the styles applied correctly.

Answer 2

for those who still find the icons missing add the second line to import ionicons

@import '.meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/ionic';

@import '.meteor/local/build/programs/server/assets/packages/meteoric_ionicons-sass/ionicons';

sample app referrence link https://github.com/meteoric/contacts/blob/master/client/stylesheets/app.scss