node-sass お疲れさまでした！
こんにちは、みみです。
車の中から書いています。移動の車の中でできる事ってないかなあと思って、ブログ更新をば。しかし間が空いてしまって書き方を忘れていますね。というかiPhoneからだとうまく書けないかも…。いや車の中だからか…。
閑話休題、先日、LibSassとDartSassの戦いに終止符が打たれたとか聞いたので、久々に #npmライブラリをおさらい をしてみたいなというお話。
何かというと、Sassの公式ブログで、LibSassは非推奨宣言されまして。
Sass: LibSass is Deprecated
ぽやんとした頭（大体いつもそう）で読んでて最初は、ちょっと前から個人的にはPostCSSに完全移行していたのでまあスルーでいいかと思ったんですが、よく考えたらまだまだnode-sass使い倒してるリポジトリ一杯あったな…と思いまして。
そちらはPostCSS完全移行でSassファイルを書き換えるより、DartSassに乗り換えの方が良さそうだなと思ってDartSassへ移行してみたのでそのメモです。
DartSassのnpmはsass
npm公式のページはこちら
https://www.npmjs.com/package/sass
コマンドラインの説明はこちら
https://sass-lang.com/documentation/cli/dart-sass
いつものように、上の2ページ読んで貰ったらこの記事は用済みなのですが、一応ざっくり抜粋して使い方を書いておきます。
インストール
1 | $ npm i sass --save-dev |
ファイル指定で変換
1 | $ sass style.scss:style.css |
フォルダ指定で変換
src/フォルダからbuld/フォルダへ
1 | $ sass src:build |
圧縮して変換
1 | $ sass --style=compressed style.scss:style:css |
@charsetを自動出力しない
1 | $ sass --no-charset style.scss:style:css |
エラーを書き出さない
1 | $ sass --no-error-css style.scss:style:css |
ソースマップなし
1 | $ sass --no-source-map style.scss:style:css |
Watch
1 | $ sass --watch src:build |
みたいな感じです。他にも機能があるので、上記公式ドキュメントをチェックしてみてください。
という訳で、夏に書いたStarter Kitのpackage.jsonをnode-sassからsassに変更しておきました。
1 | "sass": "sass --no-source-map src/scss/style.scss:src/style.css & sass --no-source-map src/scss/editor-style.scss:src/editor-style.css", |
が、体感的に特に速度が変わらないのは大体linterのせいです。CSSへのコンパイル自体は早いのかもしれませんが、スターターキット全然Sass盛ってないので体感は出来ません。もう数個ほどout dateしちゃってるライブラリがあるっぽいので、また時間を見つけてアップデートしておきます…。
まあ今や、WordPressていうかwp-scripts使っていればJSに変換したいCSSでもSassでもScssでも読み込ませれば、最適化して変換してくれる（別途記事にしてみようかな）んですけれども、別にJS使わないケースも有ると思うので、とりあえずシンプルにsass変換する感じで書いてみました。
スターターキットを作っておくと、案件とか開発とかとはべつに開発環境をアップデートしておく事が出来ていいですね。
でも流石に今ぐりぐり動いているやつはちょっと怖くてまだ変えていません（そんな問題出ない気はするのですが）。まあそもそも変えなくてもしばらく大丈夫な筈だけど、新規案件はもうnode-sassは止めたほうが良さげ。node-sassの記事にも注意書きを入れておこうと思います。
Photo by Markus Winkler on Unsplash
