如何使用 SCSS 在 svelte 中拥有多个 css 包

Posted 2023-03-07

【中文标题】如何使用 SCSS 在 svelte 中拥有多个 css 包

【英文标题】：how to have multiple css bundle in svelte with SCSS

【发布时间】：2021-04-19 12:44:56

【问题描述】：

传统上，如果我在 svelte 中有外部 scss 文件（global1.scss、global2.scss），我会像下面的代码一样将它们导入 App.svelte，最后，所有外部 scss 文件将被合并到 bundle.css

//App.svelte
...
<style>
  :global 
     import "styles/global1"; //will import global1.scss
     import "styles/global2"; //will import global1.scss
  
</style>

---

但是，我对我的应用有明显不同的要求。我想要为每个外部 scss 文件创建一个新包，而不是将所有 scss 合并到同一个 css 文件中，如下所示：

bundle.css // for component styles
global1.css //for global1.scss
global2.css //for global2.scss

我怎样才能做到这一点？谢谢！

【参考方案1】：

如果您同意将全局样式表合并为一个全局样式表，则可以使用rollup-plugin-scss。该插件似乎不支持为每个导入的文件输出样式表。

首先，在入口点 (main.js) 中导入全局 scss 文件。

import App from './App.svelte';
import './style1.scss';
import './style2.scss';

const app = new App(
    target: document.body
);

export default app;

然后将 rollup-plugin-scss 添加到您的配置中以处理 scss 导入。它将把所有导入的 scss 文件输出到global.css。

// rollup.config.js
import scss from 'rollup-plugin-scss';

export default 
    // ...
    plugins: [
        // ...
        scss(
            output: 'public/build/global.css',
            include: ['/**/*.scss'] // do not include Svelte-generated *.css files
        ),

    ],
    // ...
;

此配置会将global.css 输出到您的public/build 目录。 bundle.css 仍应从 Svelte 编译中生成。

【讨论】：

它创建了 style1.css 但里面的内容仍然是 scss。没有任何变量被删除。你能请教一下

我没有意识到 styleNodes 包含未处理的 CSS。该插件看起来不支持输出单独的 CSS 文件。我已经更新了我的答案，以展示如何为全局样式表生成一个 global.css 文件和为组件样式生成一个 bundle.css。