概要

前回に引き続き、Svelteの環境構築です。
今回はPugとSassを使えるようにしました。

手順

追加パッケージ

yarn add -D node-sass sass pug

実際にやる手順としてはこれだけです。

PugやSassでApp.svelteを書く

CSS部分をApp.scssにする

今はApp.svelteにCSSがベタで書かれているので、外に書き出します。

App.svelte

<script lang="ts">
	export let name: String;
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}
	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}
	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>

<style>の中身をとりあえず同じディレクトリにApp.scssというファイルで書き出します。
今はSCSS記法になってないですが、とりあえずOKです。

App.scss

	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}
	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}
	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}

あとは<style>タグのsrcにApp.scssを指定します。
これで少しスッキリしました。

App.svelte

<script lang="ts">
	export let name: String;
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style src="./App.scss">

HTML部分をPug記法にする

<template lang="pug">というタグを書き、その中にHTMLの中身をPug記法で書きます。

App.svelte

<script>
	export let name: String;
</script>
<template lang="pug">
- var cssName = "./App.scss"
style(src=cssName)
main
    h1 Hello {name}!
    p Visit the
	|
	|
	a(href="https://svelte.dev/tutorial") Svelte tutorial
	|
	| to learn how to build Svelte apps.
</template>

こんな感じで書けます。
Pug記法そのものについては本題ではないので、割愛します。

注意点

Pug

HTML内の記法変更

{#...}{/...}などの本来の[Svelte]の記法が使えない
そのため、専用のmixinが用意されている
専用Mixin：+if(), +else(), +elseif(), +each(), +await(), +then(), +catch(), +debug()

pug

 ul
   +if('posts && posts.length > 1')
     +each('posts as post')
       li
         a(rel="prefetch" href="blog/{post.slug}") {post.title}
     +else()
       span No posts :boom:

attributesの記法変更

Pugは、要素属性内のすべてをHTMLにエンコードします。
そのため、attr="{foo && bar}"このような記述をattr="foo && bar"に変えてしまいます
({が外れたり、記号が文字コード化されてしまう)

これを防ぐために、=ではなくエンコードを防ぐ!=を使います。

html

 <input class="new-todo" placeholder="what needs to be done?" on:keydown="{event => event.which === 13 && addTask(event.target)}">

上記のようなサンプルコードをPugで書く場合、こうなります。

before

pug

 input(class="new-todo",placeholder="what needs to be done?", on:keydown="{event => event.which === 13 && addTask(event.target)}")

after（`on:keydown`を`!=`に変更）

pug

 input(class="new-todo",placeholder="what needs to be done?", on:keydown!="{event => event.which === 13 && addTask(event.target)}")

まとめ

とりあえずここまでで、製造とかしていくうちに別の注意点とかが出てきたら追記します。
調べてて色んな情報があるのですが、sveltePreprocessorが結構優秀なのであまり追加でやることがなくなってます。

多分、sveltePreprocessorの設定方法とかを書いたほうがいい気がしてきました・・・