Skip to content
This repository has been archived by the owner on Jun 1, 2023. It is now read-only.

SASS / SCSS の割り算の記法 #6346

Open
mcdmaster opened this issue May 27, 2021 · 6 comments
Open

SASS / SCSS の割り算の記法 #6346

mcdmaster opened this issue May 27, 2021 · 6 comments
Labels
help-wanted 特に助けを必要としているもの improvement 改善や新機能の要望

Comments

@mcdmaster
Copy link
Contributor

改善詳細 / Details of Improvement

  • Dart SASSSASS/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
Copy link
Collaborator

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

@kaizumaki kaizumaki added the help-wanted 特に助けを必要としているもの label May 28, 2021
@kaizumaki
Copy link
Collaborator

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

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

参考

@mcdmaster
Copy link
Contributor Author

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

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

@mcdmaster
Copy link
Contributor Author

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

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

@kaizumaki
Copy link
Collaborator

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

@mcdmaster
Copy link
Contributor Author

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

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

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.