Export SASS/SCSS variables to Javascript without exporting them to CSS

Question

Background

Consider the following _variables.scss file:

/* Define all colours */
$white:    #fff;
$black:    #000;
$grey:     #ccc;
//         


        

Answer 1

Note: I have posted this answer because it seems there is no better solution, however, if someone subsequently provides a better solution, I will be more than happy to accept it.

It seems that the only real solution to this is to extract the export statement out of the _variables.scss file and place it into it's own _export.scss file which will subsequently not be included in the SCSS compliation.

This will look something like this:

_variables.scss - included in the SCSS compilation

/* Define all colours */
$white:    #fff;
$black:    #000;
$grey:     #ccc;
// etc...

_export.scss - not included in the SCSS compilation

@import "variables";

:export {

    // Export the color palette to make it accessible to JS
    white: #fff;
    black: #000;
    grey: #ccc;
    // etc...

}

And then your app.scss (I use brand.scss) file will look something like this (note the absence of @include "export";):

@import "variables";
@import "mixins";
@import "core";
@import "animations";
// etc...

Then, _export.scss is simply reference only in JavaScript like so (note that core-styles is just an alias that I used in my projects):

import styles from 'core-styles/brand/_export.scss';