离子创建新的sass文件

Question

我正在为我的 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();
});

Answer 1

将 gulp 文件中 sass 或 scss 任务中的 gulp.src() 更改为 gulp.src("_scss/**/*.scss") 之类的东西，双 * 表示包含任何子目录。此外，如果您不想输出另一个 css 文件，则需要创建部分文件（只需在 sass 文件名的开头添加 _。

Answer 2

您可以只拥有一个ionic.app.scss，并在此文件中使用@import 对其进行扩展。

@import "tab-home.scss", "tab-projects.scss", "tab-services.scss";