使用 gulp 构建 SASS 时设置变量？

Posted 2023-02-16

【中文标题】使用 gulp 构建 SASS 时设置变量？

【英文标题】：Set a variable while buiding SASS with gulp?

【发布时间】：2016-09-07 11:23:11

【问题描述】：

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

如您所见，我为每个颜色主题使用不同的 .scss 文件。

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

这可能吗？

【问题讨论】：

构建所有主题不是很有意义吗，因为 gulp 主要用于开发？你那么在乎吗？否则，这有帮助吗？ ***.com/questions/23023650/…

好吧，我用了一个简化的例子。实际上，我设置了 多个 变量，这将导致许多不同的组合，而只会使用少数几个（但我不确切知道哪些，这取决于在设置的建筑选项上）。所以对我来说，拥有一个动态解决方案似乎要好得多。

【参考方案1】：

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

资源/资产/sass/app/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/'));
);

【讨论】：

非常感谢，这正是我所需要的。