Question

我能理解的是gulpfile负责在build上引入.scss文件。

我的gulp文件：

var gulp = require('gulp'),
    gulpWatch = require('gulp-watch'),
    del = require('del'),
    runSequence = require('run-sequence'),
    argv = process.argv;

/**
 * Ionic hooks
 * Add ':before' or ':after' to any Ionic project command name to run the specified
 * tasks before or after the command.
 */
gulp.task('serve:before', ['watch']);
gulp.task('emulate:before', ['build']);
gulp.task('deploy:before', ['build']);
gulp.task('build:before', ['build']);

// we want to 'watch' when livereloading
var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1;
gulp.task('run:before', [shouldWatch ? 'watch' : 'build']);

/**
 * Ionic Gulp tasks, for more information on each see
 * https://github.com/driftyco/ionic-gulp-tasks
 *
 * Using these will allow you to stay up to date if the default Ionic 2 build
 * changes, but you are of course welcome (and encouraged) to customize your
 * build however you see fit.
 */
var buildBrowserify = require('ionic-gulp-browserify-typescript');
var buildSass = require('ionic-gulp-sass-build');
var copyHTML = require('ionic-gulp-html-copy');
var copyFonts = require('ionic-gulp-fonts-copy');
var copyScripts = require('ionic-gulp-scripts-copy');

var isRelease = argv.indexOf('--release') > -1;

gulp.task('watch', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts'],
    function(){
      gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
      gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
      buildBrowserify({ watch: true }).on('end', done);
    }
  );
});
gulp.task('build', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts'],
    function(){
      buildBrowserify({
        minify: isRelease,
        browserifyOptions: {
          debug: !isRelease
        },
        uglifyOptions: {
          mangle: false
        }
      }).on('end', done);
    }
  );
});

gulp.task('sass', buildSass);
gulp.task('html', copyHTML);
gulp.task('fonts', copyFonts);
gulp.task('scripts', copyScripts);
gulp.task('clean', function(){
  return del('www/build');
});

// Run typescript linter on the app folder
gulp.task('tslint', function() {
  var tslint = require('gulp-tslint');
  return gulp.src([
      'app/**/*.ts'
    ]).pipe(tslint())
      .pipe(tslint.report('verbose'));
});

我的应用非常简单，主要内容并不重要，因为没有在www / build / css上创建app.ios.css，app.md.css和app.wp.css：

应用/../ about.html

<ion-content>
  <div class="about-header">
    <img src="img/ionic-logo-white.svg">
  </div>
  <div padding class="about-info">
    <h4>Ionic Conference</h4>

    <p>
      The Ionic Conference is a one-day conference featuring talks from the
      Ionic team. It is focused on Ionic applications being built with
      Ionic 2. This includes migrating apps from Ionic 1 to Ionic 2,
      Angular concepts, Webpack, Sass, and many other technologies used
      in Ionic 2. Tickets are completely sold out, and we’re expecting
      more than 1000 developers – making this the largest Ionic
      conference ever!
    </p>
  </div>
</ion-content>

应用/.../ about.scss

.about-header {
  background-color: #434954;
  padding: 16px;
  width: 100%;
  min-height: 150px;
  text-align: center;
}

.about-header img {
  max-width: 200px;
  min-height: 115px;
  margin-left: -15px;
  padding: 25px 0 20px 0;
}

.about-info p {
  color: #697072;
  text-align: left;
}

.about-info ion-icon {
  color: color($colors, primary);
  width: 20px;
}

.md,
.wp {
  .about-info [text-right] {
    margin-right: 0;
  }
}

.ios .about-info {
  text-align: center;
}

.ios .about-info ion-icon {
  width: auto;
  margin-right: 10px;
}

我做错了什么？

Answer 1

在app / theme / app.core.scss中尝试导入文件.scss。例如：

// http://ionicframework.com/docs/v2/theming/

// App Shared Imports
// --------------------------------------------------
// These are the imports which make up the design of this app.
// By default each design mode includes these shared imports.
// App Shared Sass variables belong in app.variables.scss.
@import "../pages/hello-ionic/hello-ionic";

@import "../pages/item-details/item-details";

@import "../pages/Login/Login";

文件.scss不在生成中生成

1 个答案: