使用 Compass 构建 Ionic Sass 仍在寻找 Removed Sass 任务

Question

使用带有默认 gulpfile 的离子空白模板和运行ning:

ionic setup sass

我可以构建应用程序的 Sass，但我想添加 Compass。因此，使用 Gulp 我根据 gulp-compass 示例将以下代码添加到我的 gulpfile 中：

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 );
} );

现在，当我使用以下方法构建时它似乎可以工作：

ionic compass

但是，当我运行:

ionic serve

它运行通过构建 Sass 中的任何更改我一直收到错误消息：

Task 'sass' is not in your gulpfile

因为我删除了 'sass' 任务并将其替换为我的 'compass' 任务，并用罗盘替换了所有引用 为什么它甚至知道 'sass' 任务了？ 默认的 gulpfile 中只有三个引用，但让它工作的唯一方法是将我的 'compass' 任务重命名为 'sass'，但是运行里面的罗盘管而不是 sass 管。

// 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 );
} );

Answer 1

将任务重命名为 sass 而不是 compass。 Ionic 有一些内置的 sass 功能，假设 gulp 任务被命名为 sass 以支持实时重新加载。这在使用 ionic serve 预览您的应用程序时非常有用，并且可以将任何样式更改推送到浏览器中，而无需实际重新加载页面，并且 Ionic 的系统依赖于现有的特定 gulp 任务。

使用 Compass 构建 Ionic Sass 仍在寻找 Removed Sass 任务

Building Ionic Sass using Compass still looking for Removed Sass task

sass

gulp

gulp-sass

ionic

gulp-compass