2016-06-14 1 views
1

イオンフレームワークを使用してモバイルアプリケーションを構築していますが、私はSassを使用したいと思います。私はイオンチームが提供するSassチュートリアルに従ったが、私は問題に遭遇している。私はガルプにあまり馴染んでいないので、おそらく何かが足りなくなっているのです。コンパイルされたCSSの出力場所をイオンフレームワークのある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); 
}); 

答えて

0

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); 
}); 
関連する問題