- yarn dev
- yarn build
コンポーネントディレクトリです、共通パーツを作るときに使いましょう js,pug,scssファイルを格納してくれればうまくやってくれます あとはpugでincludeすればOKです
src/pug
├helpers
│├mixins.pug
├layouts
│└default.pug
├pages
│└ページ名
│ └index.pug
└index.pug
-
helpers
- 使い回す部分等共通処理置き場
-
layouts
- headタグ関係 共通cssの読み込みなど
-
pages
- ページごとにディレクトリを切ってその配下にindex.pugを置く(ex.
pages/test/index.pug
) - block variables内のtitleとdirNameを書く、書くとlayoutsに書いてある共通処理がうまくやってくれてcss読み込みとタイトル表示が完成する
- title = ページ名
- dirName = ディレクトリ名そのまま
block variables - const title = "お知らせ一覧"; - const dirName = "test";
- ページごとにディレクトリを切ってその配下にindex.pugを置く(ex.
-
index.pug
- エントリーポイントのindex.html
src/scss
├base
│└reset.scss
├helpers
│├functions.scss
│├mixins.scss
│└variables.scss
├pages
│└ページ名
│ └style.scss
└main.scss
- base
- reset.scssを置いてます chromeなどuser agent style sheetに変な余白つけられたときに打ち消す用
- normalize.cssもimportしてます
- helpers
- functions
- 共通関数置き場
- mixins
- 共通mixins置き場
- variables
- 共通変数置き場
- functions
- pages
- ページごとにディレクトリを切ってその配下にstyle.scssを置く(ex.
pages/test/style.scss
) - あとは普通にBEMで書けばok
- ページごとにディレクトリを切ってその配下にstyle.scssを置く(ex.
- main.scss
- 共通scssです 全ページで読み込まれる この中の処理はimportだけにしておきたい
- pug-lintは-fixオプションがないので自動修正が効かない
- ビルドコマンドはまだ作ってない(多分すぐできるから必要になったら追加)