LiveSassからCSSファイルが出力されません

前提・実現したいこと

LiveSassCompilerを正常に作動したいです。

VScodeのLiveSassCompilerの以下のエラーの解決方法がわかりません

お分かりになる方いらっしゃいましたらご教授お願い致します。

発生している問題・エラーメッセージ

cssファイルが出力されません

エラーメッセージ

Compilation Error
Error: semicolons aren't allowed in the indented syntax.
╷
1 │ $blue: #3bbfce;
│ ^

該当のソースコード

jsonは以下のように設定しています。

"liveSassCompile.settings.formats": [ // Sassの出力方法の設定
    {
      "format": "expanded", // expanded / nested / compact / compressed の4つから選択可
      "extensionName": ".css", // .css拡張子で出力
      "savePath": "~/./css" // .scssファイルからの相対的な出力先のフォルダを指定
    }
  ],
  "liveSassCompile.settings.autoprefix": [ // ベンダープレフィックスを付与する条件
    "last 2 versions",
    "ie >= 11",
  ],
  "liveSassCompile.settings.excludeList": [ // 除外するファイル
    ".vscode/**", //
  ],
  "liveSassCompile.settings.generateMap": false // ソースマップの出力有無

試したこと

LiveSassCompilerのアンインストール
Vscodeのアンインストール

補足情報（FW/ツールのバージョンなど）

Vscode：1.60.2
LiveSassCompiler:5.1.0

showkit

2021/10/05 08:52

該当の箇所とついでにその前後をコメントアウトしたらどうなりますか？

atomkatom

2021/10/05 09:05 編集

それ以降は Expected newline と新たなエラーが出ました。それも含め、全てコメントアウトすると出力されましたどのようなエラーだったのでしょうか？調べてもよく分からずすみません

showkit

2021/10/05 09:54

おそらくは、提示されている箇所でなく、その前に何かエラーとなる箇所があると思われます。少しずつコメントをはずしていって、そのエラーとなる箇所を特定するのが、時間がかかるように見えますが、確実に問題の個所を見つけられると思います。

atomkatom

2021/10/05 10:14

全てコメントアウトしないとsuccess出来ませんでした。 $の箇所はsemicolons aren't allowed in the indented syntax. その他の要素ではExpected newline のエラーが出てしまいます。

atomkatom

2021/10/05 10:45

全く同じコードをhttps://www.sassmeister.com/でペーストしたらCSSにコンパイルできたのでしばらくそれで試すしかないでしょうか？

showkit

2021/10/05 22:59

「Expected newline」は、改行コードの問題かもしれません。エディタによっては、改行コードが非表示なため、見た目変わらなくて改行が違っていた可能性があります。今んとこ、問題なければ大丈夫ですが、一行程度なにか入力してまた表示されるようでしたら、エディタを変えた方がいいかもしれません。

atomkatom

2021/10/05 23:15

非常にご丁寧なご回答ありがとうございます。大変助かりました。

showkit

2021/10/05 23:25

あ、そうか、VSCode でしたね。右下に文字コード改行コードが書かれていますので、確認できますね。解決したのであれば、自己解決方法を記述して、「解決済」にしてください。

atomkatom

2021/10/05 23:51

すみません。まだ解決はできていません。行末の;を消したり,に変換するとErrorは消えますが、相変わらず、コンパイルされません。また、{}を消すことでもErrorが消えます。エディエタの変更を考えてみます。

showkit

2021/10/06 00:08

「LiveSassCompiler」をインストールしているならば、右下に「LiveSassCompiler」の状態が表示されていると思います。「Watching」になっていますか？それとも「Watch Sass」になっていますか？クリックで入れ替わります。「Watching」になっていれば、拡張子「scss」のファイルを保存すると、自動的にコンパイルが動作するさまが出力ビューに表示されるはずです。

atomkatom

2021/10/06 00:30

Watch Sass をクリックすると一瞬Errorが表示され、Wathingになります。 Error内容は、括弧を消したり、,;を消したりを指示しているみたいです。コンパイルはされません。