将 scss 打包成多个包

Question

我正在 rollup(v2.62.0) 中使用 rollup-plugin-scs(v3.0.0) 插件来打包我的 svelte(v3.44.3) 应用程序。

有两组scss文件。一组用于从左到右的语言，另一组用于从右到左的语言。每一套都有一个入口scss文件，导入其他相关的scss文件。

我所期望的，是将 scss 文件打包成两个单独的包。

• src/styles/global_ltr.scss => global_ltr.css
• src/styles/global_rtl.scss => global_rtl.css

然后我的 svelte 组件可以根据访问者的语言延迟加载相应的 css 文件。

<svelte:head>
  <link rel="stylesheet" href="/styles/global_ltr.css" />  // or global_rlt.css if Hebrew
</svelte:head>

rollup.config.js

如下所示

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
            }),


            // ...
        ]
}

我遇到了什么问题：

1. 两套捆绑为一套。

   scss({output: function})

   回调仅在 l-t-r 和 r-t-l 样式中触发一次。

2. 我必须在我的应用程序中导入两个条目 scss 文件，否则它们将不会被捆绑。

import 'styles/global_ltr.scss';
import 'styles/global_rtl.scss';

一般来说，我尝试将两组 scss 文件捆绑到两个单独的 css 文件中，而不考虑 svelte。

提前谢谢您

Answer 1

根据包类型的styleNodes是：

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

该数组，在这种情况下，您可以尝试使用 id 和 content（所有 css 文件都转换为字符串）使用它们