Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/naoki-00-ito/vite-ts-bulma-sass-template
Vite ベースの TypeScript, Sass, Bulma などの簡易設定を行った開発用テンプレート
https://github.com/naoki-00-ito/vite-ts-bulma-sass-template
biome bulma sass stylelint template typescript vite
Last synced: 3 months ago
JSON representation
Vite ベースの TypeScript, Sass, Bulma などの簡易設定を行った開発用テンプレート
- 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 (5 months ago)
- Default Branch: master
- Last Pushed: 2024-08-24T08:29:59.000Z (5 months ago)
- Last Synced: 2024-10-01T05:41:27.216Z (4 months ago)
- Topics: biome, bulma, sass, stylelint, template, typescript, vite
- Language: HTML
- Homepage:
- Size: 75.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vite Ts Bulma Sass Template
本リポジトリには、 [Vite](https://ja.vitejs.dev/) ベースの [TypeScript](https://www.typescriptlang.org/), [Sass](https://sass-lang.com/), [Bulma](https://bulma.io/) などの簡易設定を行った開発用テンプレートが格納されています。
## 特徴
- 生の [TypeScript](https://www.typescriptlang.org/) を採用しているため、 Python の [Jinja](https://jinja.palletsprojects.com/en/3.1.x/) や Go の [Gin/Multitemplate](https://gin-gonic.com/docs/examples/multiple-template/) などのテンプレートエンジンとの組み合わせ利用に優れています。
- CSS Framework には [Bulma](https://bulma.io/) を採用してます。また、 [Sass](https://sass-lang.com/) も導入しているため、スタイリングのカスタマイズ性にも優れています。
- [Stylelint](https://stylelint.io/) や [Biome](https://biomejs.dev/) といったコードの静的解析の設定も行っております。
## コマンド一覧
依存インストール
```bash
pnpm i --frozen-lockfile
```
ビルド
```bash
pnpm 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
```
## ビルドファイル出力先の変更
[vite.config.ts](./vite.config.ts) の `outDir` の値を書き換えることで変更ができます。
ex) ビルドファイル出力先を `親ディレクトリの static` に変更する
```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)