Question

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

我想将Materialize用于CSS和JavaScript组件，但是我找不到一种方法来设置它并与Svelte集成。

我该怎么办？

Answer 1

使用materialize-css安装yarn add -D 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，我们将global.css和materialize/dist/materialize.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的列表中。

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

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

Answer 2

我已经使用Svelte + MaterializeCSS和SMUI（Svelte Material UI）开发了该模板>> Svelte + MaterializeCSS + SMUI

如何将Materialize CSS和JavaScript组件集成到Svelte中

2 个答案: