Whether a variable Stylus "feed" JS'y (Vue, webpack)?

The question arose, is it possible to make the variables available to Stylus JavaScript? I need saillant style, but manually doing this is inconvenient, you lose all the essence of the components.

Example.

There is a file stylosa hello.styl

$super-color = #777

There are single-file Vue component, like

<template>
 <h1 :style="'color': superColor">Hello</h1>
br><br><pre><code class="javascript">require ('hello.styl')
export default {
 data () {
 return {
 superColor: "
}
}
}</code></pre><br><br>
As the view to feed the data to <code>superColor</code>?<br><br>
PS: if you can not Stylosa, you can Posts? How?</template>
June 5th 19 at 21:21
1 answer
June 5th 19 at 21:23
Solution
you can define variables in the JSON, then the JSON plug in JS file.
This is certainly an option, but it is, for example, the color palette, 200+ variables. To sit that handles JSON to write do not respect themselves. - lesly_Lindgren commented on June 5th 19 at 21:26
than you JSON does not work? Stylus you will handle JSON with variables, functions, mixins and everything else that you use. - Reuben.Zemlak commented on June 5th 19 at 21:29
if you don't count CSS variables (which don't always work) is the most common method. The problem is only that the problem got late and you're trying to save yourself time doing the opposite.
In the end skopipastit all variables in one file and using find/replace to skonvertit ' this list into a JSON task for 15 minutes.
Another option is to pull out the stylus compiler AST, walk on it and grab the variables there with the color, but it will be even longer, probably:) - genevieve_Upton commented on June 5th 19 at 21:32
still hoping there are options - lesly_Lindgren commented on June 5th 19 at 21:35
I guess just use JSON, then you can touch Tailwind CSS? - lesly_Lindgren commented on June 5th 19 at 21:38
you need to make variables available in styles and scripts. this is solved by their removal in json to feed it a css preprocessor, and to load Ajax from js.
This task applies only to webpack and stylus-loader, forget about everything else. Point. - genevieve_Upton commented on June 5th 19 at 21:41
, JSON , not all the tasks were done, in the end I still had to poke the compiler) works with some limitations, but it's better than nothing.

https://github.com/FL3NKEY/stylus-variable-loader - Reuben.Zemlak commented on June 5th 19 at 21:44

Find more questions by tags JavaScriptStylusVue.jsWebpack