CODEWITHSUNDEEP
ionic-framework
Rene Padillo
Rene Padillo

Reputation: 2358

Use compass for compiling Sass files

Anyone knows how to include Compass in compiling Sass in Ionic?

Everytime I do ionic serve it gives me an error: [gulp-sass] file to import not found or unreadable: compass

Here's my Gulp task:

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

I've also done npm install -g gulp-compass it still doesn't work.

Thanks

Upvotes: 0

Views: 630

Answers (1)

Rene Padillo
Rene Padillo

Reputation: 2358

If you want to use Compass instead of Sass, make sure you have compass installed gem install sass

Then install gulp-compass and replace sass in your gulp pipe.

Here's my new config:

var compass = require('gulp-compass');

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

Then as always, import compass in to your Sass stylesheets @import "compass";

Upvotes: 1

Related Questions