Stylus篇

Sassが意味もなくコンパイルエラー吐くときがあるので、

原因究明するよりはいっそ、よりスタイリッシュそうなStylusに乗り換える。

Sassとの相違点

より無駄を省いて書ける。

Stylus単体だと階層を潜って監視してくれないみたい(2020/04/04現在)。

このページの横スクロールバー、バグってますよ。

Windows環境だとchokidar使おうにも置換が面倒なのでパス。

1階層のwatchでいいならnpm scriptsで完結する。

指定ディレクトリより深い階層も変換したいなら、gulpとか使えばいいんじゃない？

前提

Node.jsの設定は済ませている。

詳解

npmでStylusをインストールする。

npm i stylus

package.jsonを編集してStylusを使えるようにする。

{
  "scripts": {
    "Stylus": "Stylus",
  }
}

ヘルプをみるときはこれ。

npm run stylus -- -h

*.stylを同じ階層に出力するならこうする。

{
  "scripts": {
    "watch": "stylus <input dir>"
  }
}

異なる階層に出力するならこうする。

{
  "scripts": {
    "watch": "stylus <input dir> -o <otuput dir>"
  }
}

監視させるならこうする。

{
  "scripts": {
    "watch": "stylus <input dir> -o <otuput dir> -w"
  }
}

丁寧すぎたかな。おわり。