Viteを用いてTypeScriptとSCSSを使ったWebサイトの開発環境を構築する 💻

最近は、もっぱらNext.jsを使ってWebサイトを制作したり、Electronと組み合わせてMacアプリを制作したりしています。
ペライチのWebサイトですら、Next.jsを静的サイトジェネレータとして使っているのですが、ペライチのサイトであれば、Next.jsもReactも不要なのではないのかと思い、Viteの調査をはじめました。

目標としては、TypeScriptとSCSSを使える環境をさささっと構築することです。

TypeScript + SCSSのプロジェクトの作成手順

❶ viteのプロジェクトを作成

 yarn create vite

実行後、対話式の質問に応える。

• Project name → プロジェクト名を入力
• Select a framework → Vanillaを選択
• Select a variant → TypeScriptを選択

❷ sass-embeddedの導入

cd プロジェクト名

で、ディレクトリ移動後、

yarn add -D sass-embedded

を実行。

❸ ファイルをリネーム

src/style.css を src/style.scss にリネーム

❹ ソースを編集

src/main.ts

// import './style.css' // → 削除
import './style.scss' // → 追加
import typescriptLogo from './typescript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.ts'

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="${viteLogo}" class="logo" alt="Vite logo" />
    </a>
    <a href="https://www.typescriptlang.org/" target="_blank">
      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
    </a>
    <h1>Vite + TypeScript</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite and TypeScript logos to learn more
    </p>
  </div>
`

setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)

❺ 開発サーバを起動

yarn dev

これだけで、TypeScriptとSCSSを使った開発ができます。
非常に手軽です。