Ionic Framework - Sass не компилируется

Question

У меня есть приложение Ionic V1, и я сделал ionic setup sass.

Я добавил scss в watchPatterns в ionic.config.json. Gulp обнаруживает изменение файла, но не компилирует scss в css. Пробовал много вещей.

Я сделал ionic setup sass дважды. Кажется, что sass только компилируется в css, как только я делаю ionic setup sass.

Вот 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 несколько дней и имею ту же проблему. Просто добавьте эти 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, а в другом - по умолчанию gulp или независимо от имени вашей задачи. вот мой gulpfile

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']);