Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic Framework - Sass is not compiling

I have an Ionic V1 app and I did ionic setup sass.

I've added the scss in watchPatterns in ionic.config.json. Gulp detects the file change but doesn't compile the scss into the css. Tried a lot of things.

I did ionic setup sass twice. It seems that the sass only compiles into css once I do ionic setup sass.

Here's the gulpfile.js

var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('default', ['sass']);

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

gulp.task('watch', function() {
  gulp.watch(paths.sass, ['sass']);
});

gulp.task('install', ['git-check'], function() {
  return bower.commands.install()
    .on('log', function(data) {
      gutil.log('bower', gutil.colors.cyan(data.id), data.message);
    });
});

gulp.task('git-check', function(done) {
  if (!sh.which('git')) {
    console.log(
      '  ' + gutil.colors.red('Git is not installed.'),
      '\n  Git, the version control system, is required to download Ionic.',
      '\n  Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
      '\n  Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
    );
    process.exit(1);
  }
  done();
});
like image 649
Filip Petrovic Avatar asked Aug 16 '16 11:08

Filip Petrovic


3 Answers

I updated to IONIC 2 few days and have the same problem. Just add these 2 lines to your gulpfile.js:

gulp.task('serve:before', ['default','watch']);
gulp.task('run:before', ['default']);

It's working for me.

like image 63
Dimitri Belmonte Avatar answered Nov 16 '22 04:11

Dimitri Belmonte


I had similar issue and the problem started, when I had upgraded ionic-cli to version 2.x. So I would suggest you to downgrade back to version 1.x.x.; for example I am using last subversion:

npm install -g [email protected]

For me, now everything works as it was before the upgrade (I am using same gulp file, I also rename "ionic.config.json" back to "ionic.project"). Hope it helps!

like image 30
TomiL Avatar answered Nov 16 '22 04:11

TomiL


Check TomiL's answer, it might be able to help you. If not, try running two cmd's, first type ionic serve, and in the other one type gulp default, or whatever your task name is. here's my gulpfile

var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');

var paths = {
  sass: ['./scss/*.scss']
};

gulp.task('default', ['sass']);

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

gulp.task('watch', function() {
  gulp.watch(paths.sass, ['sass']);
});

gulp.task('install', ['git-check'], function() {
  return bower.commands.install()
    .on('log', function(data) {
      gutil.log('bower', gutil.colors.cyan(data.id), data.message);
    });
});

gulp.task('git-check', function(done) {
  if (!sh.which('git')) {
    console.log(
      '  ' + gutil.colors.red('Git is not installed.'),
      '\n  Git, the version control system, is required to download Ionic.',
      '\n  Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
      '\n  Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
    );
    process.exit(1);
  }
  done();
});
like image 1
Filip Petrovic Avatar answered Nov 16 '22 06:11

Filip Petrovic