CODEWITHSUNDEEP
sassgulpionic-frameworkgulp-sassgulp-compass
mtpultz
mtpultz

Reputation: 18298

Building Ionic Sass using Compass still looking for Removed Sass task

Using an ionic blank template with its default gulpfile and running:

ionic setup sass

I can build the application's Sass, but I wanted to add Compass. So using Gulp I added the below code to my gulpfile based on gulp-compass examples:

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

Now it appears to work when I build using:

ionic compass

But, when I run:

ionic serve

and it runs through building out any changes in the Sass I kept getting an error:

Task 'sass' is not in your gulpfile

Since I had removed the 'sass' task and replaced it with my 'compass' task, and replaced all references with compass why is it even aware of a 'sass' task anymore? There were only three references in the default gulpfile, but the only way to get this to work was to rename my 'compass' task to be 'sass', but run the compass pipe inside it instead of the sass pipe.

// renamed to sass from compass to remove build error
gulp.task( 'sass', function( done ) {
    gulp.src( './scss/ionic.app.scss' )
    .pipe( compass( {
               config_file: 'config.rb',
               css: 'www/css',
               sass: 'scss'
           } ) )
    .pipe( minifyCss( {
               keepSpecialComments: 0
           } ) )
    .pipe( rename( { extname: '.min.css' } ) )
    .pipe( gulp.dest( './www/css/' ) )
    .on( 'end', done );
} );

Upvotes: 0

Views: 694

Answers (1)

Jeremy Wilken
Jeremy Wilken

Reputation: 6974

Rename the task to sass instead of compass. Ionic has some built in sass features that assume the gulp task is named sass to support live reload. This is helpful when using ionic serve to preview your app and changing any of the styling can be pushed into the browser without actually having to reload the page, and Ionic's system is dependent upon that particular gulp task existing.

Upvotes: 1

Related Questions