Enabling Sass support in generator-ionic

Recently I gave ionic a try. Ionic is a "open source front-end SDK for developing amazing mobile apps with web technologies". Since there is also a ionic generator for yeoman it was rather easy to scaffold a project from scratch. It was just a matter of running these two commands to get the generator installed and a new ionic project set-up (assuming you already have yeoman running):

npm install -g generator-ionic
yo ionic

The ionic generator seems pretty flexible and even offers support for Sass which I instantly enabled. However, after the project was created I realized that the Sass support did not work out-of-the box. So I had to make some minor adjustments to the whole setup. In your app/index.html there's a reference to the styles/style.css file. Change the line to point to styles/main.css and simply delete the file app/styles/style.css as you do not need it any more.

In case you want to customize the ionic stylesheets (e.g. make some changes to the default color values) proceed like this: Create a file named app/styles/variables.scss which will contain all our variables. In addition to that create another file named app/styles/styles.scss which will contain any custom Sass rules that your application needs. Your app/styles/main.scss should look like this:

@charset "UTF-8";

@import "variables";
@import "../bower_components/ionic/scss/ionic";
@import "styles";

Now you are able to run "grunt serve" to run a local webserver instance serving the ionic project or use the "grunt build:android" task to build the Android package containing your project.