An open API service indexing awesome lists of open source software.

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: about 2 months ago
JSON representation

Vite based development templates with simple configuration for TypeScript, Sass, Bulma, etc.

Awesome Lists containing this project

README

        

# Vite Ts Bulma Sass Template

[English](./README.md) | [日本語](./README-ja.md)

![hero image](/screenshot/hero.png)



Node.js


pnpm


Vite


Biome


Stylelint


TypeScript


Bulma


Sass

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)