#Sapper #Smelte #Svelte
[[Sapper]]のプロジェクトに[[Smelte]]を導入してみた。[[📜SapperでTypeScriptプロジェクトを作ってみる]]のあとの話。
`参考` https://github.com/matyunya/smelte
## インストール
```shell
npm i smelte
```
## 設定
`rollup.config.js`を修正
```js
// 追加
import smelte from "smelte/rollup-plugin-smelte"
```
```js
export default {
client: {
input: config.client.input().replace(/\.js$/, ".ts"),
output: config.client.output(),
plugins: [
json(),
replace({
"process.browser": true,
"process.env.NODE_ENV": JSON.stringify(mode),
}),
svelte({
preprocess: sveltePreprocess(),
compilerOptions: {
dev,
hydratable: true,
},
}),
// svelteの後、cssの前に追加
smelte({
// productionではないので注意
purge: !dev,
output: "public/global.css", // it defaults to static/global.css which is probably what you expect in Sapper
postcss: [], // Your PostCSS plugins
whitelist: [], // Array of classnames whitelisted from purging
whitelistPatterns: [], // Same as above, but list of regexes
tailwind: {
theme: {
extend: {
spacing: {
72: "18rem",
84: "21rem",
96: "24rem"
}
}
}, // Extend Tailwind theme
colors: {
primary: "#b027b0",
secondary: "#009688",
error: "#f44336",
success: "#4caf50",
alert: "#ff9800",
blue: "#2196f3",
dark: "#212121"
}, // Object of colors to generate a palette from, and then all the utility classes
darkMode: true,
}, // Any other props will be applied on top of default Smelte tailwind.config.js
}),
```
`App.svelte`に追加
```svelte
<script>
import "smelte/src/tailwind.css";
</script>
```
`template.html`に追加
```html
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons&display=swap"
rel="stylesheet"
/>
```
## トラブル
- [[smelteでSapperをビルドするとchunk.imports is not iterable]]
==ここから先に進めない==