Question

我在gulp中使用以下内容从SASS（* .scss）文件构建CSS文件：

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

如您所见，我为每个colortheme使用不同的.scss文件。

我只想使用一个.scss文件，但能够以某种方式将colortheme作为参数传递，因此可以将其用作.scss文件中的变量。

这可能吗？

Answer 1

考虑到它是SCSS，您可以使用gulp-header简单地将变量定义放在文件的开头：

<强>资源/资产/ SASS /应用程序/ theme.scss

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

<强> gulpfile.js

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

var colortheme = 'blue';
var font = 'sans-serif';

gulp.task('build_css', function() {
  return gulp.src(['resources/assets/sass/app/theme.scss'])
   .pipe(header('$themeColor: ' + colortheme + ';\n' +
                '$themeFont: ' + font + ';\n'))
   .pipe(sass())
   .pipe(gulp.dest('public/css/'));
});

用gulp建立SASS时设置一个变量？

1 个答案: