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

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

0 голосов
/ 09 марта 2019

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

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 файла.

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

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

1 Ответ

0 голосов
/ 15 марта 2019

Вы пробовали node-sass-json-importer ?Он импортирует файл json в ваш sass, и вы можете получить доступ к переменным с помощью синтаксиса, например, sass-variable.Он подключается к 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'))
...