Enabling Sass support in generator-ionic

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.


Eintrag von Stephan Hochdörfer am 06.08.2015

Tags: ionic, AngularJS, yeoman, Sass

Diese Webseite verwendet Cookies, um die Bedienfreundlichkeit zu erhöhen. Mit der Nutzung unserer Webseite wird das Einverständnis erklärt, dass wir Cookies verwenden. Weitere Informationen.