34
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

webpackでsassとpostcssどちらを選択するのか

Posted at

tips: 個人的に普段感じている内容です

node-sass

  • コンパイルに長めのオーバーヘッド
  • 単純にscssを書ける
  • 導入が楽
  • 一部webpackのプラグインと相性悪く動作停止する

postcss

  • postcssの設定記述が長い
  • コンパイル早い
  • プラグインが多すぎる
  • sass likeに記述できるプラグインの存在

懸念

  • とりあえず両方を導入しようとするとメリットとデメリットで打ち消し合います。
     

  • postcssは資産に対してメンテナンスする必要が発生する一方、
    sassは良い枯れ方で扱われていて楽に運用することができます。
     

  • 実際にsassを書いてnode-sassでコンパイルすると異様なコンパイル時間を体験するでしょう。
    それは同期的に1ファイルずつコンパイルかけている認識です。
    postcssはbabelの様にサクッとコンパイルが完了します。
     

  • postcssはプラグイン何でも導入しようとすると、おそらく失敗します。
    プラグインの開発は1人でしているものから大規模なものまで品質関係なく公開されているためです。
    導入以前からそのプラグインがメンテナンスされているかを認識している必要があります。

結局どちらを選択するのか

postcssを導入して、あの長いnode-sassのコンパイル時間を削減したい思いでpostcssを選択します。

所感

正直デザインを実現するのにnode-sassでもpostcssどちらでも出来るので、コンパイル時間を短縮する労力がコストに見合うかどうかだと思いました。

34
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
34
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?