🙌

Vite + vanilla-ts+SCSS環境を作る

2022/07/18に公開

Scss

TypeScript

Vite

tech

TypeScriptをJavaScriptにコンパイルするツールとしてViteを使おうと思い、プロジェクトを作成してみました。

htmlやcssファイルを作ってからviteを入れてもいいですが、
初めから揃っているviteプロジェクトを作った方が楽なので、そちらの方法を書いていきたいと思います。

新規プロジェクト立ち上げ

https://vitejs.dev/guide/

yarn create vite

プロジェクト設定をします。

ちょっと見づらいですが、Select a Variantはvanilla-tsです。

あとは指示に従ってコマンドを入力していきます。

以下、画面が出れば成功です。

SCSS環境構築

次にscss環境を構築していきます。

sassとautoprefixerライブラリをインストール

yarn add -D sass autoprefixer

ファイル名変更

デフォルトのstyle.cssをstyle.scssに変更します。

それに伴い、main.tsのimportも.scssに変更します。

main.ts

import "./style.scss";

autoprefixer設定

ルートディレクトリに.browserslistrcを作成します。

last 2 versions
android >= 4
iOS >= 10
not dead

vite設定ファイル作成

ルートディレクトリにvite.config.tsを作成します。

ここでは開発環境と本番環境に分けていますが、sandbox的に使うなら分ける必要ないと思います。

vite.config.ts

import { defineConfig } from "vite";
import autoprefixer from "autoprefixer";

export default defineConfig(({ command }) => {
  if (command === "serve") {
    //開発環境設定
    return {
      server: {
        port: 8000,
      },
    };
  } else {
    //本番環境設定
    return {
      css: {
        postcss: {
          plugins: [autoprefixer],
        },
      },
    };
  }
});

yarn buildで確認する

ビルドしてに以下２つが出来ているかを確認します。

scssがcssに変換されているか？
cssにprefixが追加されているかを確認しあｍす。

yarn build

ビルドするとdistディレクトリが作られ、そこに生成されたファイルが置かれます。
dist/assets/index.xxxxx.cssの中身をみて期待通りになっていれば成功です。

ここまででファイル構成は、このようになっていると思います。

まとめ

今回はViteを使った新規プロジェクト作成方法を紹介しました。
新たに始める方のお役に立てたら幸いです。