Building Ionic SASS with grunt/steroids

I am trying to build a prototype project using Ionic and Appgyver Steroids. Ionic has a very nice set of UIs and template stuff, built on top of AngularJS. And Steroids offers some awesome tools for testing mobile apps (built in web server for local testing, automatic deployments, weinre debugging, emulator integration, easy workflow to deploy to real devices and debug with weinre). So putting them together sounded like the most awesome idea ever.

I made a valiant attempt (detailed below), which looks promising. However, when I run the Steroids build tools, they try to compile Ionic's SASS, and encounter a bunch of errors.

Details....

I have just started a fresh project with Steroids, using their generator command:

steroids create myApp

Then, I installed Ionic in www/components with:

bower install driftyco/ionic-bower

Then, I downloaded one of the Ionic starter projects and manually merged it with the Steroids sample code. I used the Ionic code, but redirected the CSS and JS includes to www/components. Then I copied over the includes from the sample Steroids code: steroids.js, onerror.js, console.log.js, cordova.js. I also copied over the assorted config.xml files.

I can upload some sample code somewhere, but I don't think that's actually what's broken. I just thought it would be a good idea to provide some background. In order to test my Frankenstein's monster, I ran:

steroids connect --serve

which starts a little web server on port 4000 and opens a link to it in your browser. However, when the steroids server is starting up, it detects the SCSS files and tries to compile them. I don't really NEED them compiled, since the bower package includes pre-built ones, but once I get the basics working, I'll probably want to use SASS to style the app, and it shouldn't hurt anything.

However, I get the following errors:

Running "steroids-compile-sass" task
SASS files found, attempting to compile them to dist/...

Running "sass:dist" (sass) task
Syntax error: Undefined mixin 'display-flex'.
        on line 8 of www/components/ionic/scss/_button-bar.scss, in `display-flex'
        from line 8 of www/components/ionic/scss/_button-bar.scss
  Use --trace for backtrace.

Syntax error: Undefined variable: "$checkbox-height".
        on line 10 of www/components/ionic/scss/_checkbox.scss
  Use --trace for backtrace.

Syntax error: Undefined variable: "$z-index-action-sheet".
        on line 27 of www/components/ionic/scss/_action-sheet.scss
  Use --trace for backtrace.

Syntax error: Undefined variable: "$line-height-base".
        on line 8 of www/components/ionic/scss/_form.scss
  Use --trace for backtrace.

Syntax error: Undefined mixin 'button-style'.
        on line 9 of www/components/ionic/scss/_button.scss, in `button-style'
        from line 9 of www/components/ionic/scss/_button.scss
  Use --trace for backtrace.

Syntax error: Undefined mixin 'translate3d'.
        on line 19 of www/components/ionic/scss/_animations.scss, in `translate3d'
        from line 19 of www/components/ionic/scss/_animations.scss
  Use --trace for backtrace.

File "dist/components/ionic/scss/_button-bar.css" created.
Warning:  Use --force to continue.

Aborted due to warnings.
Syntax error: Undefined mixin 'badge-style'.
        on line 8 of www/components/ionic/scss/_badge.scss, in `badge-style'
        from line 8 of www/components/ionic/scss/_badge.scss
  Use --trace for backtrace.

Syntax error: Undefined mixin 'display-flex'.
        on line 8 of www/components/ionic/scss/_bar.scss, in `display-flex'
        from line 8 of www/components/ionic/scss/_bar.scss
  Use --trace for backtrace.

So, all those undefined mixins and variables are present in my code base, under www/components/ionic/_mixins.scss and www/components/ionic/_variables.scss respectively. Both of those are included by www/components/ionic/ionic.scss. It looks like Ionic expects you to compile ionic.scss, and let it include everything in the right order (reasonable), but Steroids (which appears to be using grunt-contrib-sass) is trying to compile all the SCSS files in the directory, in some other order.

So, is there a way to configure Steroids or grunt-contrib-sass to just compile ionic.scss? If so, how? Failing that, how can I disable the SASS compilation in Steroids?

Ionic imports all scss in ionic.scss, so I excluded all _*.scss from compilation with this hack in \node_modules\grunt-steroids\tasks\steroids-compile-sass.coffee :

 ...files: [
            {
              expand: true
              cwd: 'app/'
              src: ['**/!(_*).scss', '**/!(_*).sass']
              dest: 'dist/'
              ext: '.css'
            }
            {
              expand: true
              cwd: 'www/'
              src: ['**/!(_*).scss', '**/!(_*).sass']
              dest: 'dist/'
              ext: '.css'
            }
          ]...

Merituuli from AppGyver here.

The way you installed Ionic seems unnecessarily complicated and that's what probably breaks your app. Here's instructions on how to get Ionic working within a Steroids project without Steroids complaining about undefined mixins:

  1. Create Steroids project
  2. Download Ionic framework CDN from here
  3. Go into the Steroids project into the folder www/vendor and create a new folder, for example "ionic"
  4. Copy the files you want from the unzipped CDN to the created folder
  5. Include the necessary css/js files in application.js/application.css/each html file

Does this help?

After seeing the message command connect requires to be in a Steroids project directory I wondered, what makes a directory a steroid project? Which led me to another way

  • Copy the config directory from a steroids project
  • Paste it into your ionic project directory (next but NOT inside the www directory)
  • Copy the www/loading.html file from a steroids project
  • Paste it into the www/ directory (next to index.html)
  • Run steroids connect

This starts a steroids project migration script which checks your project for errors including updates to your Gruntfile.js and package.json files (some manual intervention may be necessary) which is absolutely brilliant.

I didn't think it would be so simple or there would be a migration script - thanks AppGyver team!