https://github.com/naoki-00-ito/vite-ts-bulma-sass-template
Vite based development templates with simple configuration for TypeScript, Sass, Bulma, etc.
https://github.com/naoki-00-ito/vite-ts-bulma-sass-template
biome bulma sass stylelint template typescript vite
Last synced: 2 months ago
JSON representation
Vite based development templates with simple configuration for TypeScript, Sass, Bulma, etc.
- Host: GitHub
- URL: https://github.com/naoki-00-ito/vite-ts-bulma-sass-template
- Owner: naoki-00-ito
- License: mit
- Created: 2024-08-20T04:25:57.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2025-01-13T18:38:00.000Z (5 months ago)
- Last Synced: 2025-04-14T22:13:14.231Z (2 months ago)
- Topics: biome, bulma, sass, stylelint, template, typescript, vite
- Language: HTML
- Homepage:
- Size: 136 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vite - vite-ts-bulma-sass-template - Starter template `TypeScript`, `Bulma`, `Sass`, `Stylelint`, `Biome`. (Get Started / Templates)
- fucking-awesome-vite - vite-ts-bulma-sass-template - Starter template `TypeScript`, `Bulma`, `Sass`, `Stylelint`, `Biome`. (Get Started / Templates)
README
# Vite Ts Bulma Sass Template
[English](./README.md) | [日本語](./README-ja.md)
This repository contains a development template based on [Vite](https://ja.vitejs.dev/) configured with [TypeScript](https://www.typescriptlang.org/), [Sass](https://sass-lang.com/), [Bulma](https://bulma.io/), and more.
## Features
- Uses raw [TypeScript](https://www.typescriptlang.org/), making it suitable for use with template engines like Python’s [Jinja](https://jinja.palletsprojects.com/en/3.1.x/) or Go’s [Gin/Multitemplate](https://gin-gonic.com/docs/examples/multiple-template/).
- [Bulma](https://bulma.io/) is used as the CSS Framework. [Sass](https://sass-lang.com/) is also included, providing excellent customization for styling.
- Includes configurations for static analysis with tools like [Stylelint](https://stylelint.io/) and [Biome](https://biomejs.dev/).
## Command List
Install dependencies:
```bash
pnpm i --frozen-lockfile
```
Watch build:
```bash
pnpm build:watch
```
Biome format:
```bash
pnpm format
```
Biome lint:
```bash
pnpm lint
```
Biome Lint + format:
```bash
pnpm check
```
Sass Lint:
```bash
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
```diff
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](./LICENSE)