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

Question

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

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

我怎么能那样做？

Answer 1

安装materialize-css包yarn add -D materialize-css。

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

<!-- 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'>

演示