Question

使用离子空白模板及其默认gulp文件并运行：

ionic setup sass

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

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

因为我删除了＃sa;＆＃39;任务并将其替换为我的指南针＆＃39;任务，并用罗盘取代所有参考文献为什么它甚至意识到一个＆＃39; sass＆＃39;任务了吗？默认的gulp文件中只有三个引用，但让它工作的唯一方法是重命名我的指南针＆＃39;任务是＆＃39; sass＆＃39;，但在其中运行罗盘管而不是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任务

1 个答案: