概要
npmのsassにはファイルの更新を監視して、都度コンパイルしてくれるwatch機能がある。
watch中は@useなどで読み込んでいる外部ファイルの更新は反映されない。
外部ファイルもwatchすれば反映される。
遭遇時の作業内容
- my-custom.scss内にbootstrap.scssを@useする記述あり
- npmのsassでmy-custom.scssをwatchする
- bootstrap.scssを更新する
- my-custom.scssを更新する
- コンパイルされてcssが生成される
- bootstrap.scssの変更が適用されていない！
watchが生きている間はいくらbootstrap.scssを更新しても反映されない。
初回に読み込んだ内容が保持される。
解決策
外部ファイルもwatchする事で解決した。
//package.jsonのscript節
"mysass": "npx sass --watch --style expanded ./scss/:./ ./node_modules/bootstrap/_bootstrap.scss:./"
参考
似たようなissueが挙がってた。
Sass –watch does not detect @use file changes #2843
https://github.com/sass/sass/issues/2843
真似したんだけど、コマンドがなんか違う。動かん。
–colorとか知らないオプションついてるし。
ファイル単品を指定すると怒られるし。
ただ、
頭にアンダーバーつけてパーシャル指定するとgood。（意訳）
これは参考になった。そのままwatchすると同名のcss吐き出してしまうのだなぁ（1敗）。
感想
@use指定のファイルまでwatchしないのは分かるがコンパイルのたびにファイルは読み直してくれるのかと思っていた。
あと、外部ライブラリを勝手にリネームするのは少し抵抗ある。node_modulesの中だし。でも変えた。
お前は今日から「_bootstrap.scss」だ！