CODEWITHSUNDEEP
sasssvelterollupjssvelte-3rollup-plugin-postcss
Mr.Wang from Next Door
Mr.Wang from Next Door

Reputation: 14820

Rollup pack scss into multiple bundles

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.

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

Upvotes: 4

Views: 1256

Answers (1)

erfan khoshnoodi
erfan khoshnoodi

Reputation: 1

styleNodes according to package is types is:

export interface IdAndContentObject {
    id?: string;
    content?: string;
}
styleNodes: IdAndContentObject[]

that array, In this case you can try with id of and content(all css files convert to string) use them

Upvotes: 0

Related Questions