Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Rollup pack scss into multiple bundles

$
0
0

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:

  1. 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.

  2. 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


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>