search

tmaximini / generator-ionic-gulp

A Yeoman generator for fast hybrid app development that stays out of your way
134 stars 36 forks source link

Where to override the default theme / color swatch? #10

Closed mattvdk closed 9 years ago

mattvdk commented 9 years ago

Similar to http://learn.ionicframework.com/formulas/working-with-sass/, I have tried to add $positive: #057b6c !default; in /app/styles/_variables.scss to change the value for the 'positive' variable but that had no effect. Where else can I change the default sass variables in the generator-ionic-gulp setup? Thanks in advance :-)

tmaximini commented 9 years ago

Hi, the ionic scss gets compiled seperately and uses its own _variables.scss file. You can find and edit it in bower_components/ionic/scss. You the probably want to add this folder to the gulp watcher, like gulp.watch(['app/styles/**/*.scss', 'bower_components/ionic/scss/*.scss'], ['styles']);

You'll also have to comment out the caching for ionic's compiled scss in line 80 and 83 in the gulpfile

  var ionicStream = gulp.src('bower_components/ionic/scss/ionic.scss')
    // .pipe(plugins.cached('ionic-styles'))
    .pipe(plugins.sass(options))
    // cache and remember ionic .scss in order to cut down re-compile time
    // .pipe(plugins.remember('ionic-styles'))
    .on('error', function(err) {
        console.log('err: ', err);
        beep();
      });

I'll probably add an easier solution in a future version, but this should work for now.