/pug-js-scss-boilerplate

仕事で使う可能性があって作成したが、結局使わなかったもの 正直こんなん使いたくない

Primary LanguageJavaScriptMIT LicenseMIT

pug-js-scss-boilerplate

Usage

開発

  • yarn dev

ビルド

  • yarn build

components

コンポーネントディレクトリです、共通パーツを作るときに使いましょう js,pug,scssファイルを格納してくれればうまくやってくれます あとはpugでincludeすればOKです

pug

pugディレクトリ構成

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

    • エントリーポイントのindex.html

scss

scssディレクトリ構成

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
      • 共通変数置き場
  • pages
    • ページごとにディレクトリを切ってその配下にstyle.scssを置く(ex. pages/test/style.scss )
    • あとは普通にBEMで書けばok
  • main.scss
    • 共通scssです 全ページで読み込まれる この中の処理はimportだけにしておきたい

推奨extension

TODO

注意事項

  • pug-lintは-fixオプションがないので自動修正が効かない
  • ビルドコマンドはまだ作ってない(多分すぐできるから必要になったら追加)