DreamweaverでSCSS（SASS)のコンパイルができなくなっているので、VS CodeのLive Sass Compilerにしてみた話し

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

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

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

community.adobe.com

https://community.adobe.com/t5/dreamweaverフォーラム/リアルタイムプレビューを…

https://community.adobe.com/t5/dreamweaverフォーラム/リアルタイムプレビューを無効にしたい/td-p/8767397?page=1

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

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

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

koala-app.com

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

http://koala-app.com

Koala is a gui for Less, Sass, Compass and CoffeeScript. Koala can run in windows, mac, and linux.

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

marketplace.visualstudio.com

Live Sass Compiler – Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

Extension for Visual Studio Code – Compile Sass or Scss to CSS at realtime with live browser reload.

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

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

"savePath": "./css"

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

Brain Hack

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

https://brhk.me/programing/css/post-1009/

Live Sass Compilerというvscodeのエクステンションがありますが、ファイルを出力するとき複数あるscssファイルがまとめて一つになってしまう問題がありました。基本的にscssファイルと同じ場所に出力することは少ないと思い

"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のコンパイルをできるように環境を構築しようか。