Ionic Framework - Sass不编译

Question

我有一个Ionic V1应用程序，我做了ionic setup sass。

我在ionic.config.json中添加了watchPatterns中的scss。 Gulp检测到文件更改，但不会将scss编译到css中。试了很多东西。

我做了两次ionic setup sass。看来，只要我做了ionic setup sass，sass就会编译成css。

这里的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(); 
}); 

Answer 1

我更新了IONIC 2几天，并有同样的问题。 这两条线只需添加到您的gulpfile.js：

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

它为我工作。

Answer 2

我有类似的问题，这个问题开始，当我已经升级到ionic-cli版本2.x的所以我建议你降级回到版本1.x.x。例如我使用的最后颠覆：

npm install -g ionic@1.7.16

对于我来说，现在一切正常，因为它是升级（我用同样的一饮而尽文件，我也重新命名“ionic.config.json”回“前ionic.project“）。希望能帮助到你！

Answer 3

检查TomiL的答案，它可能会帮助你。如果没有，请尝试运行两个cmd，第一个类型为ionic serve，另一个类型为gulp默认值，或者任何您的任务名称。这里是我的大文件

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

Answer 4

我有同样的问题。我发现，这是因为咽不前“离子服务”编译SCSS文件，所以只需添加下面的任务解决了这个问题：

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