Vite ベースの TypeScript, Sass, Bulma の簡易設定を行った開発用テンプレートを作成してみた

pnpm create vite vite-ts-bulma-sass-template --template vanilla-ts

error TS2688: Cannot find type definition file for 'estree'.
  The file is in the program because:
    Entry point for implicit type library 'estree'


Found 1 error.

pnpm add -D @types/estree

vite v5.4.1 building for production...
✓ 7 modules transformed.
dist/index.html                 0.46 kB │ gzip: 0.29 kB
dist/assets/index-Cz4zGhbH.css  1.21 kB │ gzip: 0.62 kB
dist/assets/index-Bd-pKGJy.js   3.05 kB │ gzip: 1.64 kB
✓ built in 99ms

pnpm add -D sass autoprefixer

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

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

import './styles/index.scss';

pnpm add bulma

$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

@use "bulma/sass" with (
  $family-primary: '"Noto Sans JP", sans-serif',
  $grey-dark: $brown,
  $grey-light: $beige-light,
  $primary: $purple,
  $link: $pink,
  $control-border-width: 2px,
  $input-shadow: none
);
@import "https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700";

<section class="section">
  <div class="container">
    <h1 class="title">Bulma</h1>
    <p class="subtitle">
      Modern CSS framework based on
      <a
        href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"
        >Flexbox</a
      >
    </p>
    <div class="field">
      <div class="control">
        <input class="input" type="text" placeholder="Input" />
      </div>
    </div>
    <div class="field">
      <p class="control">
        <span class="select">
          <select>
            <option>Select dropdown</option>
            <option>option 1</option>
            <option>option 2</option>
          </select>
        </span>
      </p>
    </div>
    <div class="buttons">
      <a class="button is-primary">Primary</a>
      <a class="button is-link">Link</a>
    </div>
  </div>
</section>

  "scripts": {
    :
+   "build:watch": "vite build --watch",
    :
  },

pnpm add --save-dev --save-exact @biomejs/biome

pnpm biome init

  "scripts": {
    :
+   "format": "biome format --write src/ *.ts *.json",
+   "lint": "biome lint --write src/ *.ts *.json",
+   "check": "biome check --write src/ *.ts *.json",
    :
  },

pnpm format

pnpm lint

pnpm check

pnpm add -D stylelint stylelint-config-standard-scss

{
  "extends": "stylelint-config-standard-scss"
}

  "scripts": {
    :
+   "stylelint": "stylelint --fix 'src/**/*.scss'",
    :
  },

pnpm stylelint