Как я могу использовать переменные sass из файла json?

#json #sass #gulp

#json #sass #глоток

Вопрос:

Мне нужно использовать переменные из options.json in .sass файлов и .twig шаблонов с gulp. Для twig все отлично работает только с

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

Но с sass есть проблема, которую я не могу решить.

Я нашел несколько похожих вопросов, но для версии Ruby. Также эти плагины gulp не подходят из-за ссылки в файле json:

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"
  }
}

Что я пытаюсь сделать, так это использовать только часть переменных json в файле sass следующим образом:

 $opacity: $sass-bgOpacity;

Возможно ли это? Может быть, есть другой способ, я просто хочу оформить весь мой сайт ( .twig шаблоны, sass переменные) из одного options.json файла.

Очень благодарен за вашу помощь.

P.S. я не очень хорош в английском языке, поэтому не стесняйтесь поправлять меня.

Ответ №1:

Вы пробовали использовать node-sass-json-importer? Он импортирует файл json в ваш sass, и вы можете получить доступ к переменным с синтаксисом, подобным sass-variables. Он подключается к API-интерфейсу импортера узла-sass.

Вот пример:

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