我的方法有些不同。在这里，我正在导入整个布尔玛，但是您可以轻松地导入您真正需要的那些组件。然后，我使用PurgeCSS在构建过程中清理未使用的CSS。

1. App.svelte

        <style lang="scss" global>
        @import "bulma/bulma";
        </style>

1. rollup.config.js

    import sveltePreprocess from 'svelte-preprocess';
    import postcss from 'rollup-plugin-postcss';
    import autoprefixer from 'autoprefixer';
    import purgecss from '@fullhuman/postcss-purgecss';

    ...

        svelte({
            preprocess: sveltePreprocess({
                sourceMap: !production,}),dev: !production,emitCss: true
        }),postcss({
            plugins: [
                purgecss({
                    content: [
                        './src/**/*.svelte','./node_modules/svelte/*.js',],autoprefixer()
            ],extract: true,minimize: production,sourceMap: !production,...

有几件事可能很有趣：

1. 样式为global，因为没有它，我在预处理阶段会收到很多“未使用的CSS”警告
2. purgecss也需要链接到svelte/*.js，以使样式保持苗条的基础
3. postcss可能是sveltePreprocess的一部分，但这给我带来了更糟糕的结果，因此我使用的是独立的postcss，具有缩小功能
4. 我尝试过将独立的preprocess与scss和globalStyle预处理程序（https://github.com/sveltejs/svelte-preprocess/blob/master/docs/preprocessing.md#stand-alone-processors）一起使用，但是给我的结果与sveltePreprocess相同（时间和文件大小相同）

您不清楚要在哪一部分上挣扎，但我会告诉您如何将Sulte（和Sapper）与Bulma配合使用：

首先，安装bulma dev依赖项：

npm i -D bulma

然后，安装svelte-preprocess：

npm i -D svelte-preprocess

然后，将svelte-preprocess添加到汇总配置中：

  transformers: {
    scss: {
      includePaths: [
        'node_modules','src'
      ]
    }
  }
}

然后，确保将preprocess选项传递给svelte汇总插件。如果您使用的是Sapper，请同时针对服务器和客户端执行此操作。

svelte({
                dev,hydratable: true,emitCss: true,preprocess: sveltePreprocess(scssOptions)
            }),

添加一个包含您的bulma依赖项的scss入口点文件：

// scss-entrypoint.scss
@charset 'utf-8';

@import 'node_modules/bulma/sass/utilities/_all.sass';
@import 'node_modules/bulma/sass/base/_all.sass';
@import 'node_modules/bulma/sass/grid/columns.sass';
...

然后，在Sapper的根级组件（App.svelte）或（_layout.svelte）中包含sass文件：

<svelte:head>
  <style src="path/to/your/scss-entrypoint.scss"></style>
</svelte:head>

就是这样。我在这里写了一篇演讲。请参阅此和接下来的5张幻灯片：

https://antony.github.io/svelte-meetup-talk-oct-2019/#27

这里有一个工作示例：

https://github.com/antony/svelte-meetup-talk-oct-2019

如果您觉得有帮助，我已经开发了一个模板，可以在Svelte中使用MaterializeCSS。此外，我还添加了SMUI（Svelte Material UI），它添加了scss功能以使用SASS处理项目样式。

Svelte + MaterializedCSS + SMUI

在默认的Svelte模板上，我做了最小的提交，使Bulma在此示例回购中启动并运行：

https://github.com/samal-rasmussen/svelte-bulma/commit/8afb28f6f157de89d6ace8310a31ab6d2b5e1776