#79 Node SassからDart Sassに移行したいからDream weaverからVS Codeに移行した話

2023年8月6日 19:18

さて、世はDart Sass時代である。去年@importが廃止されたので、Node Sassをやめて、Dart Sassに変更しなくてはいけない。

しかし、2年前から開発が止まっているDream weaverはDart Sassのコンパイルに対応していないぞ！ということでVS Codeに移行することにしました。

Dream Weaverでメインに使っていた機能は下記の3つ。
1. サーバーへの自動アップロード
2. Sassのコンパイル
3. Git

これをVS Codeに置き換えるために下記のプラグインを選定
1. サーバーへの自動アップロード → SFTP
2. Sassのコンパイル → Live Sass Compiler
3. Git → VS Codeに元々ついてるやつ

SFTPはNatzyskunk作のもの。インストールやsftp.jsonは、下記を参照

Live Sass Compilerは本家の方は、Dart Sassに対応していないので、Glenn Marks氏のほうのLive Sass Compilerをインストールします。setting.jsonは
下記のような感じ

{
    
    "liveSassCompile.settings.compileOnWatch": false,
    "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.formats": [
        {
          "format": "expanded",
          "extensionName": ".css",
          "savePath": "~/../css",
        },
      ],
    "liveSassCompile.settings.excludeList": [ //対象外とするフォルダを指定
      "/**/node_modules/**",
      "/.vscode/**",
      "/.history/**"
    ]
}

Mapファイルは生成したくないから
"liveSassCompile.settings.generateMap": false

コンパイル形式はドリ時代はcompactだったけど、compactがなくてexpandかcompressedの二択だったので、そこはよしなに。
"format": "expanded",

出力する拡張子と出力場所は、cssフォルダの中に、.cssの拡張子で出力
"extensionName": ".css",
"savePath": "~/../css",

参考は下記

Gitは、VSCode純正の機能を使って、GUIでできました。

実際のソースコードの移行については、また別記事で書きたいと思います。

ヘッダー画像は、伊藤若冲の「雪竹に錦鶏図」

#79 Node SassからDart Sassに移行したいからDream weaverからVS Codeに移行した話

いいなと思ったら応援しよう！