CODEWITHSUNDEEP
jsonmeteorstylesheetreloadstylus
Ramona
Ramona

Reputation: 21

Is there a way to dynamically reload a json import into stylus in a meteor app?

this is my first question so I apologize for any mistakes.

I am building a Meteor app with React and Sytlus as a css preprocessor. I want the user to be able to pick some colors and import these as variables into my stylus file. (Setting the variables driectly through JavaScript or jQuery doesn't do the trick here, because I want to work with them in Stylus and use them on several levels such as hover and such. Well, it could work, but result in a lot of code and I prefer to have it all very neatly ordered.)

So right now I am writing the user's colors into a JSON file that looks like this:

{
  "colorNPK": {
    "N": "#ff6600",
    "P": "#dddd22",
    "K": "#0000ff"
  },
  "colorSID": {
    "S": "#440000",
    "I": "#004400",
    "D": "#000044"
  }
}

and then import it at the top of my variables.import.styl like this:

json('../../public/variables.json')

// then follows the rest of my variables
gold = #f9a602
darkgold = #926d02
middlebrown = #442803
...

As a result, I can use my variables in all the stylus files as for example colorNPK-N. Loading the variables on the initial application start does work, but when I'm rewriting my JSON-file during runtime the styles don't get updated and I can't see the new colors in the app.

Does anyone have an idea on how to reload my JSON-file into the stylus file after it changes?

Upvotes: 2

Views: 321

Answers (1)

coagmano
coagmano

Reputation: 5671

This can be done with a custom meteor compiler-plugin, but none of the existing ones do this with json files imported from styl files.

One quick workaround would be to import the json files from js code somewhere so the linker can find and watch them for changes.

if (Meteor.isDevelopment) {
  require('../../public/variables.json');
}

Upvotes: 1

Related Questions