
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