文件.scss不會在build中生成

Question

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

我一飲而盡文件：

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

我的應用程序是非常簡單，因爲app.ios.css，app.md.css和app.wp.css不被創建的主要內容是不重要WWW /編譯/ 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";