I am using rollup-plugin-scs(v3.0.0) plugin in rollup(v2.62.0) to pack my svelte(v3.44.3) application.
There are two sets of scss files. One set is for left-to-right languages, and the other for right-to-left languages. For each set, there is an entry scss file, which imports other relevant scss files.
What I am expecting, is to pack the scss files into two individual bundles.
- src/styles/global_ltr.scss => global_ltr.css
- src/styles/global_rtl.scss => global_rtl.css
Then my svelte component can load corresponding css file lazily according to the visitor's language.
<svelte:head><link rel="stylesheet" href="/styles/global_ltr.css" /> // or global_rlt.css if Hebrew</svelte:head>
rollup.config.js
looks like as below
import scss from 'rollup-plugin-scss'import sveltePreprocess from 'svelte-preprocess';// ...{ input: [ /*...*/ ], output: { sourcemap: true, format: 'amd', name: 'app', dir: destDir }, plugins: [ scss({ include: [ './src/styles/global_ltr.scss', './src/styles/global_rtl.scss'], output: function (styles, styleNodes) { console.log(styleNodes); fs.writeFileSync(destDir +'global_ltr.css', styles) }, failOnError: true, }), svelte({ preprocess: sveltePreprocess(), emitCss: false, // <style> in components are not included in bundles }), // ... ]}
What issues I am encountering:
Two sets are bundled into a single one. The
scss({output: function})
callback is only fired once with both l-t-r and r-t-l styles.I have to import both entry scss files in my application otherwise they won't be bundled.
import 'styles/global_ltr.scss';import 'styles/global_rtl.scss';
In general, I am trying to bundle two sets of scss files into two individual css files without considering svelte.
Thank you in advance