Question

我有一个json文件列表，每个文件都包含几个键值对，用于指示颜色，文本大小和其他此类信息。我还有一组scss个文件，包括一个variables.scss文件，其中包含这些非常变量的默认值（颜色，文本大小等）。在将默认变量的值替换为json文件中指示的值之后，如何获取Gulp任务以生成与json文件一样多的css个文件？

JSON文件示例：

{
    "css": {
        "color": "#337019",
        "textSize": "15px"
    }

}

基本variables.scss文件内容：

$themeColor: #356AA0;
$fontSize: 13px;

在上面的示例中，json文件中 color 的值将替换$themeColor文件中scss变量的值。

Answer 1

尝试在构建中使用此Gulp包：https://www.npmjs.com/package/json-sass

之前我用它来转换这个JSON：

{
    "black": {
        "base": "#000000"
    },
    "blue": {
        "base": "#0000aa"
    }
}

到这个SCSS文件：

$palettes: (
    black: (
        base: #000000
    ),
    blue: (
        base: #0000aa
    )
);

使用这个简单的Gulp任务：

var gulp = require('gulp');
var jsonSass = require('json-sass');
var source = require('vinyl-source-stream');
var rename = require('gulp-rename');
var fs = require('fs');

var sourceFolder = 'json/';
var sourceFileName = sourceFolder + 'colors.json';
var destFolder = 'css/scss/partials/';
var destFileName = '_json-colors.scss';

gulp.task('sass-json-colors', function() {
    return fs.createReadStream(sourceFileName)
    .pipe(jsonSass({
        prefix: '$palettes: ',
    }))
    .pipe(source(sourceFileName))
    .pipe(rename(destFileName))
    .pipe(gulp.dest(destFolder));
});

如何在运行CSS Gulp任务

1 个答案: