更改编译的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); 
});