#Sapper #Svelte #MaterialUI
[[Sapper]]のプロジェクトに[[Svelte Material UI]]を導入してみた。[[📜SapperでTypeScriptプロジェクトを作ってみる]]のあとの話。
`参考` https://github.com/hperrin/svelte-material-ui
## インストール
```shell
npm install --save-dev svelte-material-ui
```
コンポーネントごとのインストールも可能。
## 設定
https://github.com/hperrin/svelte-material-ui#integration-for-sapper
```
npm i -D rollup-plugin-postcss node-sass
```
`src/theme/\_smui-theme.scss`を作成。
`rollup.config.js`を編集。
```js
// 追加
import postcss from "rollup-plugin-postcss";
```
```js
// `css: true`と`emitCss: false`を追加
svelte({
compilerOptions: {
dev,
hydratable: true,
css: true
},
emitCss: false
}),
```
```js
// ----------------------------------------
// clientとserver、それぞれのセクション内で追加
// ----------------------------------------
// これは目印
commonjs(),
// ↓を追加
postcss({
extensions: ['.scss', '.sass'],
extract: false,
minimize: true,
use: [
['sass', {
includePaths: [
'./src/theme',
'./node_modules'
]
}]
]
}),
```
## トラブル
- [[Svelte Material UIでTypeScriptを使えない問題]]
==ここから先に進めない==