概要
SvelteにはReact等と同様にMaterialUIが用意されていますので、導入手順を書いていきます
hperrin/svelte-material-ui
手順
MaterialUIインストール
フルパッケージのインストール
console
yarn add -D svelte-material-ui
今回は何を使うかが未定なので、一旦フルインストールします。
補足：component単位のインストール
console
yarn add -D @smui/button
yarn add -D @smui/card
一応このようにcomponent単位でもインストール出来るので、実際に使うものが決まったらこちらのが良いかもです。
themeディレクトリの追加
プロジェクトのrootにthemeディレクトリを作ります。
console
mkdir theme
その直下に_smui-theme.scssというファイルを作成します
console
touch theme/_smui-theme.scss
index.htmlの追記
index.htmlにhttps://fonts.googleapis.com/から3つstylesheetを取り込みます。
index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<!-- 追加-->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<!-- -->
<link rel='stylesheet' href='/global.css'>
</head>
<body/>
</html>
rollup.config.jsの修正
postcssにuse項目を追加して、./themeを読み込むようにします。
rollup.config.js
postcss({
extract: './dist/css/bundle.css',
sourceMap: true,
use: [
['sass', {
includePaths: [
'./theme',
'./node_modules'
]
}]
],
plugins: [
autoprefixer()
]
}),
MaterialUI適用
サンプル集がこちら
そのサンプル集の*.svelteのコードはこちらのGithubにあります
今はどうやら設定するattributeのDocumentsがないっぽくて、適用したいUIをGithubのページから探して同じ設定をするしかなさそう・・・
まとめ
今は英語Documentsすらままならない状態なので今後に期待です。
実際に使ったcomponentのまとめなども作れたらいいなぁと思ってます、チートシート的な。
大変ではありますが、調べながらやればキレイなMUIにはなるので是非ご利用を！