Question

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

我一直在寻找一些有关如何执行此操作的教程，但是我还没有发现任何东西。

有什么想法吗？

Answer 1

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

App.svelte

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

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,
        }),
    ...

有几件事可能很有趣：

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

Answer 2

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

Answer 3

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

Svelte + MaterializedCSS + SMUI

Answer 4

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

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

将MaterialCSS的Sass版本或布尔玛集成到Svelte中

4 个答案: