[Archive] Partager des variables entre SASS et JavaScript avec webpack

Cet article est une archive de mon ancien blog. Les informations y étant présentées peuvent être datées et ne plus refléter mes points de vue actuels.

S'il vous arrive de vouloir accéder à des variables définies dans un fichier .scss depuis votre javascript, sachez que c'est tout à fait possible en utilisant webpack.

Il suffit de les exporter comme-suit :

$primary: rgb(255, 0, 0);

:export {
  primary: $primary;
}

...puis de les récupérer :

import variables from './variables.scss';
console.log(variables['primary']);
// #ff0000

Quelle utilité ?

Synchroniser les animations css et js, recalculer des dimensions sous un breakpoint, récupérer la taille d'un élément, etc.

Si vous cherchez une configuration Webpack permettant de réaliser cette astuce vous pouvez en trouver une dans ce projet.