Vite Ts Bulma Sass Template

English | 日本語

本リポジトリには、 Vite ベースの TypeScript, Sass, Bulma などの簡易設定を行った開発用テンプレートが格納されています。

特徴

• 生の TypeScript を採用しているため、 Python の Jinja や Go の Gin/Multitemplate などのテンプレートエンジンとの組み合わせ利用に優れています。
• CSS Framework には Bulma を採用してます。また、 Sass も導入しているため、スタイリングのカスタマイズ性にも優れています。
• Stylelint や Biome といったコードの静的解析の設定も行っております。

コマンド一覧

依存インストール

pnpm i --frozen-lockfile

ビルド

pnpm build

ビルド監視

pnpm build:watch

Biome format

pnpm format

Biome Lint

pnpm lint

Biome Lint + format

pnpm check

Sass Lint

pnpm stylelint

ビルドファイル出力先の変更

vite.config.ts の outDir の値を書き換えることで変更ができます。

ex) ビルドファイル出力先を 親ディレクトリの static に変更する

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

export default defineConfig(() => {
  return {
    build: {
-     outDir: "static",
+     outDir: "../static",
      assetsDir: 'assets',
      rollupOptions: {
        input: 'src/index.ts',
        output: {
          entryFileNames: '[name].js',
          chunkFileNames: '[name].js',
          assetFileNames: '[name].[ext]',
        },
      },
    },
    css: {
      postcss: {
        plugins: [autoprefixer],
      },
    },
  };
});

License

MIT