2016-05-11 10 views
3

私はSASS(* .scss)ファイルからCSSファイルを構築するためにgulpで次のコマンドを使用します。あなたは私が各colorthemeに異なる.scssファイルを使用して見ることができるようにSASSをgulpでビルドするときに変数を設定しますか?

var gulp  = require('gulp') 
    , sass  = require('gulp-sass'); 

var colortheme = 'blue'; 

gulp.task('build_css', function() { 
    return gulp.src(['resources/assets/sass/app/' + colortheme + '.scss']) 
      .pipe(sass()) 
      .pipe(gulp.dest('public/css/')); 
}); 

を。

私は1つの.scssファイルしか使用しませんが、colorthemeを何らかの方法でパラメータとして渡すことができます。これを.scssファイル内の変数として使用できます。

これは可能ですか?

+0

あなたのテーマをすべて構築するのは理にかなっていませんか開発において主に使用されていますか?そんなに気にしますか?それ以外の場合は、これが役に立ちますか? http://stackoverflow.com/questions/23023650/is-it-possible-to-pass-a-flag-to-gulp-to-have-it-run-tasks-in-different-ways – kasperoo

+0

まあ、私は使用しました簡単な例実際には、私は*複数の変数を設定していますが、組み合わせが非常に多くなりますが、いくつかしか使用されません(ただし、設定されているビルドオプションに依存するものはありません。だから、ダイナミックなソリューションを持っているほうが私にとってはるかに良いようです。 – Dylan

答えて

9

それはあなたが単にgulp-headerを使用して、ファイルの先頭に変数定義をウンチできるSCSSだことを考えると:

リソース/資産/ SASS /アプリ/ theme.scss

.foo { 
    color: $themeColor; 
    font-family:$themeFont; 
} 

gulpfile .js

+0

ありがとう、これはまさに私が必要としているようです。 – Dylan

関連する問題