DreamweaverでSCSS(SASS)のコンパイルができなくなっている話し

DreamweaverでSASS(SCSS)のCSSへのコンパイルができない。というか、突然できなくなっていた。

F12でブラウザプレビューができなくなっているから、Dreamweaverがアップデートされた影響かと思ったが、Dreamweaverをアップデートしたという履歴がなかった。どうして、突然SASSのコンパイルができなくなったのは不思議である。

F12でブラウザプレビューができなくなっているのは、いつものことだから対応できる。次のサイトのように、PIB_Dynamic.jsを編集すればよい。

解決済み: リアルタイムプレビューを無効にしたい – Adobe Support Community – 8767397

Adobe Support Community

だけど、SCSSからCSSにコンパイルできないのは困った。Dreamweaverの「サイトの管理」にある「CSSプリプロセッサー」の設定を見直しても問題は見つからない。

このまま、困って止まっていても仕方ないので、SCSSのコンパイルの別の手を考える。突然、Dreamweaverがトラブルを起こすのはいつものことだから、アドビのサポートに何とかしてもらうよりも、自分で何とかしてしまったほうが早い。

SASSのコンパイルは、以前WindowsでKoalaというWindowsで動くGUIのコンパイラを使ったことがあるが、バージョンアップが3年くらいもしていないので却下した。

http://koala-app.com/

Koala – a gui application for LESS, Sass, Compass and CoffeeScript compilation.

他にないかと考えたら、VS Codeの拡張機能のLive Sass Compilerを使うことにした。わざわざNode.jsのタスクライナーでコンパイル環境を作るのも大変だしね。

Live Sass Compiler – Visual Studio Marketplace

Extensions for Visual Studio family of products | Visual Studio Marketplace

しかし、Live Sass Compilerのデフォルトの設定では、CSSはSCSSと同じディレクトリに出力してしまう。こちらの希望は、scss/の同じ階層のcss/に出力してほしい。

最初、Live Sass Compilerの設定ファイルにある”liveSassCompile.settings.formats”に

"savePath": "./css"

と書いてみたらダメで相変わらずSCSSと同じフォルダにCSSを作成してくれる。調べてみると、参考にしたのは以下のサイトである。

Live Sass Compilerの出力先を各ファイルごとに分ける方法 | Brain Hack

Brain Hack | 洋書多読で英語力と脳を鍛えるために
"savePath": "~/../css"

のように~/を付けるといいそうだ。

以上で、無事にSCSSからCSSにコンパイルすることができた。しかし、SCSSの保存はVS Codeからではないとコンパイルしてくれないのね。DreamweaverでSCSSファイルを保存しても、Live Sass CompilerはCSSにコンパイルしてくれない。ファイルの更新を監視しているのではなく、VS Codeのファイルの保存でフックして実行しているみたいである。Dreamweaverだけでファイルの更新ができないのは、多少面倒である。HTMLはDreamweaver、CSSはVS Codeと、編集のアプリケーションを切り替えないといけないようだ。

やはりここは、node.jsのnpmでゴニョゴニョして、何かのタスクライナーを使ってファイルの更新を監視しして、自動SCSSのコンパイルをできるように環境を構築しようか。

追記(2021年3月2日)

この記事を書いてからDreamweaverのアップデートがあったみたいで、現在はSASSへのコンパイルは正常になっている。AdobeのDreamweaverってたまにこんなことがあるから・・・。