我正在为我的 html5 移动应用程序使用 Ionic 框架。
我知道我可以将自定义 sass 添加到 scss 文件夹下的 ionic.app.scss 文件中,并且 ionic serve 或 ionic build 会将我的 sass 编译成 css,但是如果我想在这里添加其他 sass 文件,例如 ionic。 home.scss 我如何让这些编译?我需要修改 gulp 文件吗?
我基本上是在扩展默认的 Ionic tabs app应用程序。这是我想要的结构,基本上是每个模板的 sass 文件
+-- _gulpfile.js
+-- _scss
| +-- ionic.app.scss
| +-- tab-home.scss
| +-- tab-projects.scss
| +-- tab-services.scss
+-- _templates
| +-- tab-home.html
| +-- tab-projects.html
| +-- tab-services.html
+-- index.html
这是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())
.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.app.scss
并在此文件中使用 @import
扩展它。
@import "tab-home.scss", "tab-projects.scss", "tab-services.scss";
关于javascript - Ionic 创建新的 sass 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27007698/