将MaterialCSS或Sulma的Sass版本集成为Svelte

Question

我正在寻找有关如何将Materializecss或Bulma的sass版本集成到Svelte中的说明。我的目标是能够将单个组件（例如按钮组件或卡片组件）导入到单个苗条组件中。此外，我希望能够利用Bulma提供的sass变量。

我已经找到了一些有关如何执行此操作的教程，但还没有找到任何东西。

有什么想法吗？

Answer 1

您不清楚要在哪个部分上苦苦挣扎，但我会告诉您如何将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