Correct way to integrate Ionic with meteoric-ionic into a Meteor app

I am currently exploring using the Ionic framework in my app and using the meteoric-ionic package to do so.

I followed the instructions in the Getting Started Guide for getting set up.

However, it wasn’t until I added the following @import statement to a scss file that Ionic actually worked (ie views rendered properly), which I found in one of the demo apps:

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

There is no mention of this in the guide and generally this doesn’t look right to me.

Is this really the correct way to integrate Ionic into a Meteor app?

1 Like

Every Meteoric project I’ve worked on required me to add the @import line in order to load the sass assets. I remember reading this on a github issue a long time ago (can’t seem to find it).

Also, if you want to use the Ionicons along with Meteoric, you have to make sure to add the second line too:

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

//line below is for loading ionicons

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

Ok, thanks for confirmation that this appears to be the right way to do it. And I also found this in the meteoric-sass package instructions:

…in your app’s .scss file:

@import ‘.meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/ionic’;
NOTE:
Due to a current limitation of the Meteor packaging system, the above path may not exist the first time you run your Meteor app after installing this package. This will cause an error saying the file to import was not found. This may also occur if you run meteor reset. Restarting your app should fix this problem. See meteor/meteor#2606 and meteor/meteor#2796 for more info.

It turns out I am not able to get ionicons to load as per these instructions. I have attempted to restart the application multiple times to no avail.

I am wondering if the problem is tied to that I am not able to update the packages to the latest version due to some apparent incompatibility with other packages.

Below is my current package list. How can I determine which packages are preventing ionic-sass and ionicons-sass from updating?

⚡   meteor list
accounts-facebook                1.0.4  Login service for Facebook accounts
accounts-google                  1.0.4  Login service for Google accounts
accounts-password                1.1.1  Password support for accounts
accounts-ui                      1.1.5  Simple templates to add login widgets to an app
aldeed:template-extension        3.4.3  Adds template features currently missing from the templating package
chuangbo:marked                  0.3.5  A markdown parser and compiler. Built for speed.
coffeescript                     1.0.6  Javascript dialect with fewer braces and semicolons
copleykj:jquery-autosize         1.17.8  Automatically adjust textarea height based on user input.
copleykj:livestamp               1.1.7  jQuery plugin providing auto-updating timeago text to your timestamped HTML elements using Moment.js
fastclick                        1.0.3  Faster touch events on mobile
flemay:less-autoprefixer         1.1.0  The dynamic stylesheet language + Autoprefixer
fortawesome:fontawesome          4.3.0  Font Awesome (official): 500+ scalable vector icons, customizable via CSS, Retina friendly
fourseven:scss                   3.2.0  Style with attitude. Sass and SCSS support for Meteor.js (with autoprefixer and sourcemaps).
iron:router                      1.0.9  Routing specifically designed for Meteor
lookback:dropdowns               1.2.0  Reactive dropdowns for Meteor.
matteodem:easy-search            1.6.1  Easy-to-use search with Blaze Components (+ Elastic Search support)
meteor-platform                  1.2.2  Include a standard set of Meteor packages in your app
meteorhacks:fast-render          2.7.1  Render your app before the DDP connection even comes alive - magic?
meteorhacks:zones                1.6.0  Zone.Js integration for meteor
meteoric:ionic                   0.1.17  Ionic components for Meteor. No Angular!
meteoric:ionic-sass              0.1.3* Ionic's CSS Framework in SASS and bundled for Meteor.
meteoric:ionicons-sass           0.1.2* Ionic's Ionicons library in SASS and bundled for Meteor.
mrt:moment                       2.8.1  Moment.js, a JavaScript date library for dates, packaged for Meteor. See http://momentjs.com.
msavin:mongol                    1.1.0  The insanely handy development package for Meteor.
reactive-dict                    1.1.0  Reactive dictionary
reactive-var                     1.0.5  Reactive variable
sacha:spin                       2.3.1  Simple spinner package for Meteor
service-configuration            1.0.4  Manage the configuration for third-party services
splendido:accounts-emails-field  1.2.0  Adds to the user obj a `registered_emails` field containing 3rd-party account service emails.
splendido:accounts-meld          1.3.1  Meteor package to link/meld user accounts registered with the same (verified) email address.
tmeasday:publish-counts          0.4.0  Publish the count of a cursor, in real time
underscore                       1.0.3  Collection of small helpers: _.map, _.each, ...
useraccounts:core                1.11.1  Meteor sign up and sign in templates core package.
useraccounts:unstyled            1.11.1  Accounts Templates unstyled.
utilities:avatar                 0.7.15  Consolidated user avatar template (twitter, facebook, gravatar, etc.)

I keep getting Scss compiler error: file to import not found or unreadable: after I add all the packages and the @imports to the app.scss file…any help on that if you got it to work?

I figured out, that removing both lines ("@import") in app.scss and building the app without it, sets up the missing links. Usually destroyed by a “meteor reset”.
After this initial build re-enable both lines ("@import") in app.scss and build again.