使用 Node 和 Gulp 注入 SCSS 变量答案

【问题标题】：Injecting SCSS variables with Node and Gulp使用 Node 和 Gulp 注入 SCSS 变量
【发布时间】：2017-10-08 02:52:11
【问题描述】：

我想根据不同的sass变量编译不同的css文件。

我正在尝试使用 Gulp 来实现这一目标

gulp.task('var 1', function() {
    gulp.src(['styles/vars/var1.scss','styles/client.scss'])
        .pipe(sass().on('error', sass.logError))
        .pipe(concat('clientWithVar1.css'))
        .pipe(gulp.dest('./public/'))
});

它似乎不起作用，我收到Sass 变量不存在的错误。

我怎样才能做到这一点？任何帮助表示赞赏

【问题讨论】：

您能否在client.scss 文件的顶部使用@import "vars/var1.scss";（并从Gulp 任务中删除对var1.scss 的引用？
我特意省略了@import "vars/var1.scss";，所以我可以提供不同的变量并生成不同的client.css。一旦我解决了这个问题，我将有 4 个具有不同变量文件的任务，然后希望有一个任务来组合这 4 个并生成 4 个具有不同变量的不同 css 文件。

标签： css node.js sass gulp

【解决方案1】：

你可以这样试试：

你有这个目录结构：
- tmp（文件夹）
- _var1.scss
- _var2.scss
- 客户端.scss

在 client.scss 添加：@import "./tmp/var.scss
并在下面添加 gulp 任务，因此您只需使用所需的变量复制和重命名 scss 文件，然后您就可以编译您的主 scss 文件

var rename = require('gulp-rename');

gulp.task('copy', function() {
   return gulp.src('./styles/_var1.scss')
            .pipe(rename('var.scss'))
            .pipe(gulp.dest('./styles/tmp'));
})

【讨论】：

【解决方案2】：

假设你有一个类似这样的目录结构：

vars/var1.scss
vars/var2.scss
vars/var3.scss
vars/var4.scss
styles/1/client.scss
styles/2/client.scss
styles/3/client.scss
styles/4/client.scss

并且在每个client.scss 文件中都有一个对应的@import 语句（例如@import "../../vars/var1/.scss";），您应该能够通过单个任务生成所有样式表：

gulp.task('sass', function() {
    gulp.src('styles/**/client.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./public/'))
});

我认为这应该以public/1/client.css、public/2/client.css 等结尾，但您可能需要调整gulp.dest 行以适应。

【讨论】：