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

【问题标题】：How can i use sass variables from json file?如何使用 json 文件中的 sass 变量？
【发布时间】：2019-03-09 13:36:28
【问题描述】：

我需要在 .sass 文件和 .twig 模板中使用来自 options.json 的变量和 gulp。对于树枝来说，所有的作品都很好用

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

但是使用 sass 有一个问题，我无法解决。

我发现了一些类似的问题，但对于 Ruby 版本。由于 json 文件中的链接，此 gulp 插件也不适合：

gulp-json-sass
gulp-json-to-sass

我的 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;

这可能吗？也许还有另一种方法，我只想从一个 options.json 文件中为我的整个网站（.twig 模板、sass 变量）设置主题。

非常感谢您的帮助。

附：我的英语不太好，请随时纠正我。

【问题讨论】：

@Amir，感谢您改进我的问题。
不客气。查看我的答案。它能解决你的问题吗？
好的，再次感谢，抱歉让您久等了。

标签： json sass gulp

【解决方案1】：

你试过node-sass-json-importer吗？它将一个 json 文件导入到您的 sass 中，您可以使用 sass-variables 之类的语法访问变量。它与node-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'))

【讨论】：

如果这篇文章回答了你的问题，请接受它