The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

Customizing your Ionic app with SASS can easily change its look and feel, but it can also create some problems. One particular problem can be syntax issues breaking your build stream. In this article, we’ll look at a quick and easy fix for this problem.

Let’s Break Things

First, let’s create a project with SASS already set up for us.

$ ionic start myApp --sass
$ cd myApp

From here, let’s up open up the project in our editor and then start our live reload server. With the server running, we can start to edit our ionic.app.scss file and make any changes we want, but for our example, we’re going to break things. We’ll copy the $stable variable and change its value.

/*
To customize the look and feel of Ionic, you can override the variables
in Ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/

$stable:                          #34495e !default
// The path for our Ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

We’ve also forgotten to add a semicolon at the end of the variable, which will cause a syntax error and print out this error in our console.

ionic $ [16:57:36] Using gulpfile ~/myApp/gulpfile.js
[16:57:36] Starting 'sass'...
[16:57:36] Starting 'watch'...
[16:57:36] Finished 'watch' after 6.05 ms

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error: top-level variable binding must be terminated by ';'

So let’s go back and add that semicolon. Once we have, we can save the file and expect to compile the Sass, but in this case, it won’t compile. The syntax error will completely break the gulp build stream. This can be incredibly problematic and just plain annoying when developing your app. Thankfully, it’s easy to fix.

Can we fix it? Yes, we can!

To fix the problem, we can open up our gulpfile.js and pass in an option to our SASS task.

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass({errLogToConsole: true}))
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

Adding {errLogToConsole: true} to the SASS method will allow us to log out any errors to our console and keep our build stream from breaking. Now, we can continue working with our SASS files, be notified of any syntax errors, and keep our live reload server from breaking.

Gulp-SASS Docs

SASS Docs

Gulp Docs

  • Jiyuu

    Hallelujah! It has been one of the most annoying thing since I started with Ionic…
    Thanks a lot!

  • paulogr

    really annoying ! kkk thank you for help !

  • AndrewBlair

    awweeeesome.

  • jasondu

    thank you

  • abdulmanan ahmed

    wow thanks a lot. thought i was the only one experiencing this problem

  • neilgoldman305

    Awesome, thanks! This was an annoying issue that I had no idea how to fix (I guess I need to sit down and study Gulp). Can this be the default behavior in future versions? Any reason the current default behavior is preferred?

  • Mladen Petrovic

    This should be default option most definitely

  • Selahattin Ünlü

    Thank youuu! :))

  • Chris Weed

    I love Ionic, I love Angular… I just don’t like Ruby (and SASS by extension). Still makes me sad, and keeps me a bit hesitant to use Ionic full time (and propose it for my company).

    • yesimahuman

      Then you’ll be glad to know we use libsass which is written in C++ 🙂

      In general we find it’s considerably faster.