export sass variables for include in JavaScript

[svdoever]

I try to use the :export construct as described in https://stackoverflow.com/questions/61517117/cannot-export-sass-variables-into-javascript?noredirect=1&lq=1 to be able to use values of SASS variables in my JavaScript but can't get it working:

@import "variables";

:export {

    // Export the color palette to make it accessible to JS
    some-light-blue: $some-light-blue;
    battleship-grey: $battleship-grey;
    // etc...

}

Should this work with rollup-plugin-sass, or is there another method to accomplish this?

[gloverab]

Struggling with this same issue. Did you ever get it resolved?

[dangnelson]

Dying for this feature.

[duowb]

This is my implementation, I don't know if you can use it

index.scss

:export {
  --font-size-primary: 14px;
  --color-border-primary: #3B4144;
}

test.js

import index from './index.scss'
console.log(index)

dist/src/test.es5.js

var index = {"--font-size-primary":"14px","--color-border-primary":"#3B4144"};

console.log(index);

[elycruz]

@duowb Nice! .. I will look into integrating the feature later this week, or if you want to open a pull request ..?

[elycruz]

As pointed out in #71 turns out the plugin supported this all along (lol): Tl;dr You need to use 'icss-utils', along with 'postcss', to process the output css and then return an object containing all exported key/value pairs to the plugin, from the 'processor' field:

https://github.com/elycruz/rollup-plugin-sass/blob/f4b2e6457ed52fb2b4ade58c9853ebf124396980/test/index.test.ts#L290-L315