Question

我想根据不同的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错误。

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

Answer 1

您可以尝试这种方式：

你有这个目录结构：
- tmp（文件夹）
- _var1.scss
- _var2.scss
- client.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'));
})

Answer 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行以适应。

使用Node和Gulp注入SCSS变量

2 个答案: