0

我在 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})回调仅在 ltr 和 rtl 样式中触发一次。

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

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

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

先感谢您

4

0 回答 0