SASS / SCSS の割り算の記法

[mcdmaster]

改善詳細 / Details of Improvement

• Dart SASS を SASS/SCSS エンジンとして用いる場合の、除算（/）記法の制限変更（強化）への対応案

スクリーンショット / Screenshot

割愛します

期待する見せ方・挙動 / Expected behavior

• Vue ファイル中に <style></style> タグで、あるいはそれらのプログラムファイルから参照される *.sass, *.scss といったファイルの中身に記される、スタイルシートについてです
• 現在の Vue + Nuxt 環境構築の際のデフォルトで入ってくる SASS 用ローダーモジュール SASS-Loader では、Node-SASS でなくこの Dart SASS がバンドルされているはずです
  https://www.npmjs.com/package/sass-loader
• この Dart SASS に、けっこう影響範囲が広そうな変更が加えられます。それは、除算を表す際にプログラミング言語全般としても最も一般的と思われる / （フォワードスラッシュ）記号が使えなくなる」というものです
  https://sass-lang.com/documentation/breaking-changes/slash-div
• 経過期間を経た後、SASS や SCSS を使い続ける際は、/ 記号で除算を表すのが完全不可能となります
• これへの対策を考えましょう、というのが本イシュー起票の動機です。実は、既に Vuetify には PR を出していたりします。なぜなら、最新の SASS (Dart SASS) + SASS-Loader モジュールでコンパイルを行った場合、たとえ我々が対策を講じてあっても Vuetify 中の SASS から多くのエラーメッセージが吐き出されることが既に判明しているためです
  fix(styles): deal with new sass restriction vuetifyjs/vuetify#13704

動作環境・ブラウザ / Environment

• macOS / Windows / Linux / iOS / Android
• Chrome / Safari / Firefox / Edge / Internet Explorer

[kaizumaki]

@mcdmaster issueありがとうございます！私も最近、このDart SassのBreaking Changesは気になっていたところです。Vuetifyに限らず、cssフレームワーク界隈はざわついているんじゃないでしょうか...。ちょっと様子見したいところではあります。

[kaizumaki]

うわあ、いま手元環境を立ち上げてみたんですが、とてもローカルサーバーを立ち上げられる状況ではないですね...。
取り急ぎの処置として、 package.json に以下を追加して逃げることにしました（resolutionsって、こういう時に役に立ちますね！）。

"resolutions": {
  "@nuxtjs/vuetify/**/sass": "1.32.12"
}

参考

[mcdmaster]

@kaizumaki たぶん、vuetify が最悪のくせ者(笑)だと思います。早く vuetifyjs/vuetify#13704 を通してくれるといいのですけれども。

あと、こちらの vue ファイルにも除算の / がわずかながらありますので、洗い出しをしているところです。別途 PR を上げますね。
で、そこでは resolutions ブロックを使ってバージョン固定のカギをいったんは掛けておきましょう

[mcdmaster]

@kaizumaki [email protected] がリリースされました。私が起案した SASS/SCSS 関連の修正 vuetifyjs/vuetify#13704 も含まれています。

ただ、ちゃんと使うためにはちょっとしたコツの要るこの機能が日々の動作を邪魔しているふうにも見え、Vuetify のイシューは今のところは整理できているとしても、実際には現場の阿鼻叫喚に引っ張られるのではかいかと懸念されます。

[kaizumaki]

@mcdmaster おお！すばらしいですね！大きな一歩です！
それでもまだcustom variablesを使用時に問題ありそう、ということでしょうか？ワークアラウンドはやりようがあるみたいですけど、ちょっと待ったほうがいいでしょうかね？

[mcdmaster]

Vuetify の PR を押し込んだ(笑)立場としては、オススメ・ワークアラウンドはお示ししておかねばですね。
現在、お試し中です。

なお、既に報告が出ているようですけれども、nuxt を使っている場合は若干お作法が異なるようです。
それを突き止めた時点で、こちらでも PR を出せればと思っています。

Vuetify チームの皆さんが「なんでこんな PR を受け付けてしまったんだろう…」と後悔していないことを祈るばかりです(悩