3

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

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

有任何想法吗？

4

5 回答 5

12

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

添加一个包含 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

于 2019-11-14T10:39:30.317 回答
4

我的方法有点不同。在这里，我正在导入整个 Bulma，但您可以轻松地仅导入您真正需要的那些组件。然后，我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. style 是global，因为没有它，我会在预处理阶段收到很多“未使用的 CSS”警告
  2. purgecss也需要链接svelte/*.js，以保持苗条基础中使用的样式
  3. postcss可能是 的一部分sveltePreprocess，但这给了我更糟糕的结果，所以我正在使用postcss带有缩小的独立
  4. 我已经尝试将独立preprocess与 justscss和globalStyle预处理器一起使用（https://github.com/sveltejs/svelte-preprocess/blob/master/docs/preprocessing.md#stand-alone-processors），但这给了我相同的结果sveltePreprocess（时间和文件大小相同）
于 2020-08-03T09:31:37.630 回答
1

我在默认的 Svelte 模板之上做了一个最小的提交，它让 Bulma 在这个示例 repo 中启动并运行：

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

于 2020-11-06T14:19:13.247 回答
1

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

苗条 + MaterializedCSS + SMUI

于 2020-12-09T20:48:25.823 回答
0

运行以下命令：

npx svelte-add@latest bulma
于 2021-12-22T01:55:24.007 回答