【Svelte】SvelteでPugとSassを使いたいので対応しました【Pug+Sass】

概要

前回に引き続き、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の設定方法とかを書いたほうがいい気がしてきました・・・