Ionic Framework - Sass不编译
我有一个Ionic V1应用程序,我做了ionic setup sass
。Ionic Framework - 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();
});
我更新了IONIC 2几天,并有同样的问题。 这两条线只需添加到您的gulpfile.js
:
gulp.task('serve:before', ['default','watch']);
gulp.task('run:before', ['default']);
它为我工作。
也可以添加:gulp.task('run:before',['default']); –
我有类似的问题,这个问题开始,当我已经升级到ionic-cli
版本2.x的所以我建议你降级回到版本1.x.x。例如我使用的最后颠覆:
npm install -g [email protected]
对于我来说,现在一切正常,因为它是升级(我用同样的一饮而尽文件,我也重新命名“ionic.config.json”回“前ionic.project“)。希望能帮助到你!
对于最新的离子1版本npm安装-g离子@“
检查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();
});
我有同样的问题。我发现,这是因为咽不前“离子服务”编译SCSS文件,所以只需添加下面的任务解决了这个问题:
gulp.task('serve:before', ['default']);
非常感谢,再次遇到这个问题,couln't不记得我第一次解决这个问题,就是这样!感谢:D – DevMoutarde
是你的CSS改变了这一切在ionic.app.scss? – e666
不确定你的意思。我想做的所有更改我想将其放入ionic.app.scss中,但是只有当我执行离子设置sass时,该文件才会在手表上编译 –
您是否有任何错误?它不会编译,如果你做另一个'离子发球'nether? – e666