Reras-factory

ガジェットとかAppleとかいろいろ

npm-scriptsでDart Sassをコンパイルする改

  • Web
  • 2021/10/17


前記事の改良版です。

ベンダープレフィックスが付与されない

前回の記事でご紹介したnpm-scriptsですが、Sassコンパイル後のPostCSSの動作に問題があり、AutoPrefixerによるベンダープレフィックスの付与がされないという問題がありました。
そこでPostCSSの処理を独立させ、更にnpmパッケージを追加しメディアクエリをまとめる処理も追記します。

SassコンパイルとPostCSSを分離

まずは、scriptsを以下の2つに分割します。この時AutoPrefixer用のbrowerslistは個別で記述します。PostCSSにもwatchコマンドがあることを知ったので監視モードにしておきます。

"scripts": {
 "watch:sass": "sass --watch scss:css --style expanded" ,
 "watch:prefix": "postcss css/style.css --use autoprefixer -o css/style.css --map -w",
},
"browserslist":[
  "last 2 versions",
  "ie >= 11",
  "Android >= 7",
  "last 3 iOS major versions"
]

パッケージを追加

メディアクエリをまとめるパッケージを追加します。『mqpacker』が有名ですが、非推奨扱いとなっていたため『postcss-combine-media-query』を使用します。

npm install postcss-combine-media-query --save-dev

PostCSSでの処理を追加

PostCSSでの処理にpostcss-combine-media-queryを追加します。以下は追記後のscriptsです。

"watch:prefix": "postcss css/style.css --use postcss-combine-media-query autoprefixer -o css/style.css --map -w",

動かす

npm-scriptsには複数のscriptを順番に動かしたり並列で動かせる機能があるっぽいですが、上手く動きませんでした…。なので自分はターミナルを2つ開いてSassのwatchとPostCSSのwatchを同時に走らせてます。
別々のシェルで同時に動かす分には問題なさそうです。

Dir > npm run watch:sass
Dir > npm run watch:prefix