Sassをコンパイルする改Web2021/10/17Web前記事の改良版です。ベンダープレフィックスが付与されない前回の記事でご紹介したnpm-scriptsですが、Sassコンパイル後のPostCSSの動作に問題があり、AutoPrefixerによるベンダープレフィックスの付与がされないという問題がありました。そこでPostCSSの処理を独立させ、更にnpmパッケージを追加しメディアクエリをまとめる処理も追記します。SassコンパイルとPostCSSを分離まずは、scriptsを以下の2つに分割します。この時AutoPrefixer用のbrowerslistは個別で記述します。PostCSSにもwatchコマンドがあることを知ったので監視モードにしておきます。versions"]パッケージを追加メディアクエリをまとめるパッケージを追加します。『mqpacker』が有名ですが、非推奨扱いとなっていたため『postcss-combine-media-query』を使用します。--save-devPostCSSでの処理を追加PostCSSでの処理にpostcss-combine-media-queryを追加します。以下は追記後のscriptsです。-w",動かすnpm-scriptsには複数のscriptを順番に動かしたり並列で動かせる機能があるっぽいですが、上手く動きませんでした...。自分はターミナルを2つ開いてSassのwatchとPostCSSのwatchを同時に走らせてます。別々のシェルで同時に動かす分には問題なさそうです。