更改編譯的CSS輸出位置SASS與離子框架

Question

我正在構建使用離子框架的移動應用程序，我想使用Sass。我遵循離子團隊提供的Sass教程，但遇到了問題。我對吞噬不是很熟悉，這就是爲什麼我可能錯過了一些東西。

我已經更改了我的架構文件夾，並且我仍然創建了一個使用ionicapp.css和ionic.app.min.css（www/css）的sccs創建的css文件夾。 我想將此文件夾的位置（和世代）更改爲www/assets/css。我怎樣才能做到這一點 ？

我的文件夾結構是：

| scss 
    | ionic.app.scss 
| www 
    | app 
     | app.route.js 
     | app.controllers.js 
      | My functionalities .. 
    | assets 
      | css 
      | img 
      | lib 
       | ionic 
    | index.html 

我SCSS/ionic.app.scss文件：

/* 
To customize the look and feel of Ionic, you can override the variables 
in ionic's _variables.scss file. 

For example, you might change some of the default colors: 

$light:       #fff !default; 
$stable:       #f8f8f8 !default; 
$positive:      #387ef5 !default; 
$calm:       #11c1f3 !default; 
$balanced:      #33cd5f !default; 
$energized:      #ffc900 !default; 
$assertive:      #ef473a !default; 
$royal:       #886aea !default; 
$dark:       #444 !default; 
*/ 

// The path for our ionicons font files, relative to the built CSS in www/css 

$ionicons-font-path: "../assets/lib/ionic/fonts" !default; 

// Include all of Ionic 
@import "www/assets/lib/ionic/scss/ionic"; 

而且我gulpfile.js的一部分

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/assets/css/')) 
.pipe(minifyCss({ 
    keepSpecialComments: 0 
})) 
.pipe(rename({ extname: '.min.css' })) 
.pipe(gulp.dest('./www/assets/css/')) 
.on('end', done); 
}); 

Answer 1

你的gulpfile.js應該是這樣的：

gulp.task('sass', function(done) { 
    gulp.src('./www/assets/scss/ionic.app.scss') 
     .pipe(sass()) 
     .on('error', sass.logError) 
     .pipe(gulp.dest('./www/assets/css/')) 
     .pipe(minifyCss({ 
      keepSpecialComments: 0 
     })) 
     .pipe(rename({ 
      extname: '.min.css' 
     })) 
     .pipe(gulp.dest('./www/assets/css/')) 
     .on('end', done); 
});