将 MaterialCSS 或 Bulma 的 Sass 版本集成到 Svelte 中

Question

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

我已经寻找了一些关于如何做到这一点的教程，但我还没有找到任何东西。

有任何想法吗？

Answer 1

您不清楚自己在努力解决哪个部分，但我会告诉您我如何将 Bulma 与 Svelte（和 Sapper）一起使用：

首先，安装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)
            }),

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

// 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