Grunt, Sass, Ionic


#1

I am using the ionic generator for my project and i am running into issues compiling SASS using grunt-contrib-sass.
Here is my grunt task:

> compass: { // Task
>             dist: { // Production Target
>                 options: {
>                     sassDir: 'app/styles/scss',
>                     cssDir: 'app/styles',
>                     environment: 'production'
>                 }
>             },
>             dev: { // Dev target
>                 options: {
>                     sassDir: 'app/styles/scss',
>                     cssDir: 'app/css',
>                     importPath: 'app/bower_components/ionic/scss',
>                     config: 'app/styles/config.rb',
>                     debugInfo: true

>                 }
>             }
>         },

and i keep getting this error:

 Running "compass:dev" (compass) task
        error app/styles/scss/ionic.app.scss (Line 22: File to import not found or unreadable: ionic.scss.
    Load paths:
      /Users/akone/git/tonsorious-ionic/app/styles/scss
      /Users/akone/.rvm/gems/ruby-1.8.7-p370/gems/compass-0.12.2/frameworks/blueprint/stylesheets
      /Users/akone/.rvm/gems/ruby-1.8.7-p370/gems/compass-0.12.2/frameworks/compass/stylesheets
      /Users/akone/git/tonsorious-ionic/app/bower_components/ionic
      Compass::SpriteImporter)
    overwrite app/css/ionic.app.css
    Warning: Task "compass:dev" failed. Use --force to continue.
    
    Aborted due to warnings.

the offending line is the import in ionic.app.scss that I have adjusted many ways tro try and get it to work:

// Include all of Ionic
@import "ionic.scss";

I made some updates to the import path so that instead of trying to load the whole ionic/scss folder, as you can see, it tries to load the ionic.scss file but again, an error related to the comments in that file:

Running "compass:dev" (compass) task
    error app/styles/scss/ionic.app.scss (Line 7 of app/bower_components/ionic/scss/ionic.scss: Invalid CSS after "...ionicons.scss",": expected uri, was "// Variables")
overwrite app/css/ionic.app.css
Warning: Task "compass:dev" failed. Use --force to continue.

Aborted due to warnings.

I removed the comments and this is the next error;

Running "compass:dev" (compass) task
    error app/styles/scss/ionic.app.scss (Line 298 of app/bower_components/ionic/scss/_mixins.scss: Invalid CSS after "...-shadow($shadow": expected ")", was "...) {")
overwrite app/css/ionic.app.css
Warning: Task "compass:dev" failed. Use --force to continue.

Aborted due to warnings.

It does not like the three dots in

@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
     -moz-box-shadow: $shadow;
          box-shadow: $shadow;
}

So far is the SASS does not seem very Grunt friendly, I am stuck. Is there anything I am missing?