#Svelte #Smelte
https://github.com/matyunya/smelte
[[Svelte]]の[[TypeScript]]プロジェクトに[[Smelte]]を導入する。対象プロダクトは[[🧊FLOWER]]。
## インストール
```shell
npm i smelte
```
## 設定
`rollup.config.js`を修正。`output`を変更しているので注意。
```js
// 追加
import smelte from "smelte/rollup-plugin-smelte"
```
```js
export default {
input: "src/main.ts",
output: {
sourcemap: true,
format: "iife",
name: "app",
file: "public/build/bundle.js",
},
plugins: [
json(),
svelte({
preprocess: sveltePreprocess(),
compilerOptions: {
// enable run-time checks when not in production
dev: !production,
},
}),
smelte({
purge: production,
// public/global.cssのままだとアプリケーションのglobal cssが上書きされてしまうため変更する
output: "public/smelte.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
}),
// we'll extract any component CSS out into
// a separate file - better for performance
css({ output: "bundle.css" }),
// 以下略。。
],
watch: {
clearScreen: false,
},
};
```
`App.svelte`に追加
```svelte
<script lang="ts">
import "smelte/src/tailwind.css";
// 以下略..
</script>
```
`public/index.html`に追加
```html
<!-- outputをpublic/smelte.cssに変更したため -->
<link rel="stylesheet" href="/smelte.css" />
<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"
/>
```