:export for consumption of variables 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 exact same issue. Did you ever get it resolved?

[RossComputerGuy]

I'm also looking to see this work.

[elycruz]

Hi all,
Turns out the plugin supported this all along: Example:
https://github.com/elycruz/rollup-plugin-sass/blob/f4b2e6457ed52fb2b4ade58c9853ebf124396980/test/index.test.ts#L290-315

Closing issue as is duplicate of #72 .

[elycruz]

Correct example reference:

rollup-plugin-sass/test/index.test.ts

Lines 290 to 315 in f4b2e64

	test('should support processor return type `Promise<{css: string, icssExport: {}, icssImport: {}}}>', async t => {
	const outputBundle = await rollup({
	input: 'test/fixtures/processor-promise/with-icss-exports.js',
	plugins: [
	sass({
	processor: (css) => new Promise((resolve, reject) => {
	const pcssRootNodeRslt = postcss.parse(css),
	extractedIcss = extractICSS(pcssRootNodeRslt, true),
	cleanedCss = pcssRootNodeRslt.toString(),
	out = Object.assign({}, extractedIcss.icssExports, {
	css: cleanedCss,
	});
	// console.table(extractedIcss);
	// console.log(out);
	resolve(out);
	}),
	options: sassOptions,
	}),
	],
	}),
	{output} = await outputBundle.generate(generateOptions),
	rslt = squash(unwrap(output));
	t.true(rslt.includes(expectA2));
	t.true(rslt.includes(expectB));
	});