Vite Ts Bulma Sass Template

English | 日本語

This repository contains a development template based on Vite configured with TypeScript, Sass, Bulma, and more.

Features

• Uses raw TypeScript, making it suitable for use with template engines like Python’s Jinja or Go’s Gin/Multitemplate.
• Bulma is used as the CSS Framework. Sass is also included, providing excellent customization for styling.
• Includes configurations for static analysis with tools like Stylelint and Biome.

Command List

Install dependencies:

pnpm i --frozen-lockfile

Watch build:

pnpm build:watch

Biome format:

pnpm format

Biome lint:

pnpm lint

Biome Lint + format:

pnpm check

Sass Lint:

pnpm stylelint

Changing the Build Output Directory

You can change it by modifying the outDir value in vite.config.ts.

Example) Changing the build output to static in the parent directory

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