Question

如何从json对象形式的sass变量列表中生成css输出，并结合使用这些变量的scss文件？

实际流程将是：

json / object representation of sass variables + .scss file = combined .css file

尝试了json-sass，但生成的Sass地图不能用于简单的sass变量。

终于得到gulp-json-sass转换

{
  "someColor": "green",
  "someObject" : {
    "someKey" : "45px"
  }
}

到

$someColor: green;
$someObject-someKey: 45px;

这里有实际的部分，如何在gulp过程中使用用户修改的json对象而不是json文件 gulp.src(['some.json','some.scss']) ？

Answer 1

这假设您已将json字符串分配给名为obj

的变量

function streamifyText(text) {
    var s = new stream.Readable();
    s._read = function noop() {};
    s.push(text);
    s.push(null);
    return s;
}

上述函数用于将字符串转换为流。

gulp.task('sass', function () {

    var combinedStream = CombinedStream.create();
    combinedStream.append(streamifyText(JSON.stringify(obj)).pipe(vinylSourceStream('anyName.json')));
    combinedStream.append(fs.createReadStream('./some.scss').pipe(vinylSourceStream('anyName.scss')));

    combinedStream
        .pipe(vinylBuffer())
        .pipe(gulpJsonSass({sass: false}))
        .pipe(gulpConcat('combined.scss'))
        .pipe(gulpSass().on('error', gulpSass.logError))
        .pipe(gulp.dest('out/'));
});

有关实施的更多详情，请点击此处 -

https://gist.github.com/midhunanew/338a4bb3adce51ab29387dbe5156718a

使用节点中的gulp使用json对象流从scss / sass流创建css文件

1 个答案: