I was wondering what's the best way to install new bower pkgs ? I wanted to shortcut all the media-queries per device so I could:

bower install sass-mediaqueries --save-dev

And in my root_project/scss/app.scss file to add and start using it:

@import "media-queries";

The question is where to run this command ? ( root dir ? inside node_modules ) In the Ionic's app tree:

├── node_modules
│   ├── bower
│   ├── gulp
│   ├── gulp-concat
│   ├── gulp-minify-css
│   ├── gulp-rename
│   ├── gulp-sass
│   ├── gulp-util
│   └── shelljs

And how do I compile that together ?

I tried running this command in the root dir, and now the bower.json looks like this:

{
  "name": "HelloIonic",
  "private": "true",
  "devDependencies": {
    "ionic": "driftyco/ionic-bower#1.0.0-beta.13",
    "sass-mediaqueries": "~1.4.0"
  }
}

Then I tried adding it to the scss/app.scss ( which is being included by the main ionic.app.scss file, but it gives an error:

Error: source string:2: error: file to import not found or unreadable: "media-queries"

Solution

Took me a while, I needed to add in my app.scss this

@import "www/lib/sass-mediaqueries/media-queries";

instead of just

@import "media-queries";

( as their docs in GitHub says ... )

I wonder if that is still the right way to import new bower libs, or what I've found is a hack ...