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?