I found the solution
I realized that the same thing I did for a Laravel Mix 5->6 upgrade worked for Vite too, as per this Github comment of mine.
The gist of it is: _foo.scss (with the exported variables) should be renamed to foo.module.scss, and rather than doing a destructured import of the variables from the scss file, the entire default needs to be imported, and then that can be const destructured.
So rather than doing:
import { primary } from './foo.module.scss';
You would need to do this instead:
import foo from './foo.module.scss'; const { primary } = foo;
Videos
If you use webpack you can use sass-loader to exportvariables like:
$animation-length-ms: $animation-length + 0ms;
:export {
animationMillis: $animation-length-ms;
}
and import them like
import styles from '../styles/animation.scss'
const millis = parseInt(styles.animationMillis)
https://blog.bluematador.com/posts/how-to-share-variables-between-js-and-sass/
I consider my solution to be quite hokey; but it does work...
In my _base.scss I have some variables defined:
$menu_bg: rgb(45, 45, 45);
$menu_hover: rgb(0, 0, 0);
In a menu.scss I have:
@import "base";
#jquery_vars {
.menu_bg {
background-color: $menu_bg;
}
.menu_hover {
background-color: $menu_hover;
}
}
And in a handy page template:
<span class="is_hidden" id="jquery_vars">
<span class="is_hidden menu_bg"></span>
<span class="is_hidden menu_hover"></span>
</span>
Finally this allows in a nearby jQuery script:
var menu_bg = $('#jquery_vars .menu_bg').css("background-color");
var menu_hover = $('#jquery_vars .menu_hover').css("background-color");
This is so ugly my dad is wearing a bag on his head.
jQuery can pull arbitrary CSS values from page elements; but those elements have to exist. I did try pulling some of these values from raw CSS without creating the spans in the HTML and jQuery came up with undefined. Obviously, if these variables are assigned to "real" objects on your page, you don't really need the arbitrary #jquery_vars element. At the same time, one might forget that .sidebar-left nice-menu li is the vital element being use to feed variables to jQuery.
If someone has anything else, it's got to be cleaner than this...
» npm install js-to-scss
» npm install json-to-scss
You can't. SASS is a CSS preprocessor, which means that all SASS specific information disapears when you compile it to CSS.
CSS
:root {
subTitleLeftMargin: 1.5vw;
}
.element {
margin-left: var(--subTitleLeftMargin);
}
JS or TS
document.documentElement.style.setProperty("--subTitleLeftMargin", "6vw");
» npm install sass-to-js
Some improvements to the accepted answer:
Use camelCase so you will be able to individually export a variable.
Set the
@eachdirective outside so it won't generate a new:exportat-rule for each variable.
_variables.scss
$theme-colors: (
'someColor': #000,
'anotherColor': #FFF,
);
:export {
@each $key, $value in $theme-colors {
#{unquote($key)}: $value;
}
}
app.js
import styles from './core-styles/brand/_variables.scss' // { anotherColor: "#FFF", someColor: "#000" }
import { someColor } from './core-styles/brand/_variables.scss' // #000
Note: I tend to include quotes within Sass Maps, but you can omit them.
Taking a Cue from Bootstrap 4, you could combine a SASS map with a loop like below;
/* Define all colours */
$theme-colours: (
some-color: #000,
another-color: #000,
third-color: #000,
fourth-color: #000
)
@each $color, $value in $theme-colours {
:export{
$color: $value;
}
}Here's some examples from the Bootstrap 4 Docs