我如何将 Materialise CSS 和 JavaScript 组件集成到 Svelte 中答案

【问题标题】：How could I integrate Materialize CSS and JavaScript components into Svelte我如何将 Materialise CSS 和 JavaScript 组件集成到 Svelte 中
【发布时间】：2019-12-12 22:06:26
【问题描述】：

我是 Svelte 的新手，我想用它来构建我的下一个项目。

我想为 CSS 和 JavaScript 组件使用 Materialize，但我找不到设置它并与 Svelte 集成的方法。

我该怎么做？

【问题讨论】：

标签： javascript materialize svelte

【解决方案1】：

使用yarn add -D materialize-css 安装materialize-css 软件包。

股票 Svelte 模板 (https://github.com/sveltejs/template) 在 public/index.html 中有 2 个 CSS 导入

<!-- base styles -->
<link rel='stylesheet' href='/global.css'>

<!-- styles that were defined in the components -->
<link rel='stylesheet' href='/build/bundle.css'>

让我们调整 CSS 的构建方式。我们会将global.css 和materialize/dist/materialize.css 合并到一个文件中，而不是global.css。

有一个名为 rollup-plugin-css-only 的汇总插件可以做到这一点。

yarn add -D rollup-plugin-css-only

在rollup.config.js中，通过导入import css from 'rollup-plugin-css-only'来配置插件，并将css({output: "public/build/base.css"})添加到plugins的列表中。

现在我们可以在src/main.js 中导入.css 文件：

import '../node_modules/materialize-css/dist/css/materialize.css'
import '../public/global.css'

// import js stuff too
import '../node_modules/materialize-css/dist/js/materialize'

....

// init material plugins
M.AutoInit()

不要忘记更新public/index.html 以包含生成的base.css 而不是global.css：

- <link rel='stylesheet' href='/global.css'>
+ <link rel='stylesheet' href='/build/base.css'>

Demo

【讨论】：

@josnuss 如果您使用 Sapper & Svelte 会怎样？我假设M.AutoInit() 和插件将应用于客户端 - 对吗？
是的，正确的。 Materialize 仅在客户端运行。

【解决方案2】：

我用 Svelte + MaterializeCSS 和 SMUI (Svelte Material UI) 开发了这个模板 >> Svelte + MaterializeCSS + SMUI

【讨论】：

请解释这与问题的关系以及它是如何工作的。