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.
\n<\/p>\n
First, let’s create a project with SASS already set up for us.<\/p>\n
$ ionic start myApp --sass\n$ cd myApp\n<\/code><\/pre>\nFrom 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<\/code> file and make any changes we want, but for our example, we’re going to break things. We’ll copy the $stable<\/code> variable and change its value.<\/p>\n\/*\nTo customize the look and feel of Ionic, you can override the variables\nin Ionic's _variables.scss file.\n\nFor example, you might change some of the default colors:\n\n$light: #fff !default;\n$stable: #f8f8f8 !default;\n$positive: #387ef5 !default;\n$calm: #11c1f3 !default;\n$balanced: #33cd5f !default;\n$energized: #ffc900 !default;\n$assertive: #ef473a !default;\n$royal: #886aea !default;\n$dark: #444 !default;\n*\/\n\n$stable: #34495e !default\n\/\/ The path for our Ionicons font files, relative to the built CSS in www\/css\n$ionicons-font-path: "..\/lib\/ionic\/fonts" !default;\n\n\/\/ Include all of Ionic\n@import "www\/lib\/ionic\/scss\/ionic";\n\n<\/code><\/pre>\nWe’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.<\/p>\n
ionic $ [16:57:36] Using gulpfile ~\/myApp\/gulpfile.js\n[16:57:36] Starting 'sass'...\n[16:57:36] Starting 'watch'...\n[16:57:36] Finished 'watch' after 6.05 ms\n\nstream.js:94\n throw er; \/\/ Unhandled stream error in pipe.\n ^\nError: top-level variable binding must be terminated by ';'\n<\/code><\/pre>\nSo 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.<\/p>\n
Can we fix it? Yes, we can!<\/h3>\n
To fix the problem, we can open up our gulpfile.js<\/code> and pass in an option to our SASS task.<\/p>\ngulp.task('sass', function(done) {\n gulp.src('.\/scss\/ionic.app.scss')\n .pipe(sass({errLogToConsole: true}))\n .pipe(gulp.dest('.\/www\/css\/'))\n .pipe(minifyCss({\n keepSpecialComments: 0\n }))\n .pipe(rename({ extname: '.min.css' }))\n .pipe(gulp.dest('.\/www\/css\/'))\n .on('end', done);\n});\n<\/code><\/pre>\nAdding {errLogToConsole: true}<\/code> 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.<\/p>\n\n