Question

我需要使用options.json文件中.sass中的变量和gulp使用.twig模板。对于树枝，只要配合使用，一切都很棒

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;

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

非常感谢您的帮助。

P.S。我的英语不是很好，所以请随时纠正我。

Answer 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'))

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

1 个答案: