如何使用json文件中的sass变量？

Question

我需要在options.json文件中使用来自.sass的变量，在gulp中使用.twig模板。因为小枝都很好用

pipe(data(function(file) {
    return JSON.parse(fs.readFileSync('app/options.json'));
}))
.pipe(twig())

但是有个问题我解决不了。

除了Ruby版本，我还发现了一些类似的问题。另外，由于json文件中的链接，这个gulp插件不合适：

• 吞咽
• 狼吞虎咽

我的json文件如下所示：

{
  "page": {
    "view": "mockup",
    "bg": "gradient",
    "buttons": "two"
  },
  "sass": {
    "bgOpacity": ".5",
    "bgPicture": "https://pics.freeartbackgrounds.com/midle/Street_in_Lund_Sweden_Background-1287.jpg",
    "bgColor": "$gradient-4"
  }
}

我要做的是在sass文件中只使用一部分json变量，如下所示：

$opacity: $sass-bgOpacity;

这个是可能的吗？也许还有另外一种方式，我只想从一个.twig文件中主题我的整个站点( sass模板、options.json变量)。

非常感谢你的帮助。

我不太擅长英语，所以请随时纠正我。

Answer 1

你试过节点-sass-json-进口商了吗？它将一个json文件导入到sass中，您可以使用sass-变量这样的语法访问这些变量。它连接到节点-sass的导入程序api。

下面是一个示例：

style.scss

@import 'some.json'

body {
    font-size: $font_size_in_json
}

some.json

{
    "font_size_in_json": "12px"
}

gulpfile.js

gulp.src('source/**/*.scss')
    .pipe(sassImportJson({'isScss': true, 'cache': false}))
    .pipe(sass())
    .pipe(gulp.dest('dist/resources/css'))