Is it possible to "feed" the Stylus variable to JS (Vue, webpack)?

Question

JavaScript

The question arose, is it possible to make Stylus variables available to Javascript? I need to inline the style, but doing it manually is inconvenient, the whole essence of the components is lost.
Example.
There is a stylus file. There is a single-file Vue component, likehello.styl
$super-color = #777

<template>
  <h1 :style="'color': superColor">Hello</h1>
</template

require ('hello.styl')
export default {
  data () {
    return {
      superColor: ''
    }
  }
}

How to feed this data to the view superColor?
PS: if you can't use Stylus, then maybe PostCSS? How?

Answer 1

you can describe variables in JSON , and then include this JSON in a JS file.