Is it possible to import SASS variables inside JS code?

I found this handy tutorial online that shows how to have a single source of truth for your styling variables, by importing SASS variables directly inside of your javascript to be reused:

Has someone tried to get this done in Meteor and succeeded, with the fourseven:scss package ?

1 Like

I’ve tried something similar in the past, but without success, I’m currently migrating to styled-components, so I don’t need it anymore.
The main contention here is the use of webpack, so you would need to find a babel equivalent to make this work or get there via Meteor-Webpack:

Yeah I was hoping to find something without using meteor-webpack. I guess it’s a limitation!

Isn’t https://polished.js.org what you are looking for?

No, polished doesn’t solve the basic problem of getting SASS variables into JS, that needs to happen at a lower level.

How about https://github.com/adamgruber/sass-extract-js ? Its sole purpose is to extract sass variables into plain javascript objects.

You can incorporate this into the meteor build system or use the webpack loader along with the webpack integration mentioned above.

3 Likes