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

Question

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

我已经寻找了一些有关如何执行此操作的教程，但尚未找到任何内容。

有什么想法吗？

Answer 1

你不清楚你在哪个部分挣扎，但我会告诉你我是如何将布尔玛与 Svelte(和工兵)一起使用的：

首先，安装 bulma dev 依赖项：

npm i -D bulma

然后，安装苗条预处理：

npm i -D svelte-preprocess

然后，将 svelte 预处理添加到汇总配置中：

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';
...

然后，将 sass 文件包含在 Sapper 中的根级 comoponent (App.svelte) 或 (_layout.svelte) 中：

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

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

1. App.svelte

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

2. 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. 我尝试使用只有scss和globalStyle预处理器 (https://github.com/sveltejs/svelte-preprocess/blob/master/docs/preprocessing.md#stand-alone-processors) 的独立preprocess，但这给了我与sveltePreprocess相同的结果(时间和文件大小相同)

Answer 3

我在默认的 Svelte 模板之上进行了最小的提交，该模板使 Bulma 在此示例存储库中启动并运行：

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

Answer 4

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

Svelte + MaterializedCSS + SMUI

Answer 5

运行以下命令：

npx svelte-add@latest bulma

Answer 6

如果你使用SvelteKit，首先安装Bulma：

npm i -D bulma

然后从 Vite 的配置中全局加载 Bulma 的变量和混合值，以及您的自定义变量：

// vite.config.js
export default defineConfig({
plugins: [sveltekit()],
css: {
preprocessorOptions: {
sass: {
additionalData: `
@import "$lib/sass/_variables"
@import "bulma/sass/utilities/_all"
`,
}
},
}
});

定义您自己的变量或要重新定义的布尔玛变量：

// src/lib/sass/_variables.sass
$primary: red
$secondary: orange
$tablet: 600px

最后，从全局文件中从 Bulma 导入所需的模块：

// src/lib/sass/global.sass
@import "bulma/sass/base/_all"
@import "bulma/sass/elements/_all"
@import "bulma/sass/form/_all"
@import "bulma/sass/components/_all"
@import "bulma/sass/grid/_all"
@import "bulma/sass/helpers/_all"
@import "bulma/sass/layout/_all"