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

Sign up for the Ionic Newsletter to get the latest news and updates!

10 Comments

  • Avatar Jiyuu says:

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

  • Avatar paulogr says:

    really annoying ! kkk thank you for help !

  • Avatar AndrewBlair says:

    awweeeesome.

  • Avatar jasondu says:

    thank you

  • Avatar abdulmanan ahmed says:

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

  • Avatar neilgoldman305 says:

    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?

  • Avatar Mladen Petrovic says:

    This should be default option most definitely

  • Avatar Selahattin Ünlü says:

    Thank youuu! :))

  • Avatar Chris Weed says:

    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).

    • Avatar yesimahuman says:

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

      In general we find it’s considerably faster.