質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
コンパイルエラー

コンパイルのフェーズで生成されるエラーです。よく無効なシンタックスやタイプが含まれているとき発生します。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

解決済

1回答

2714閲覧

Live Sass Compiler を初期化したい。

koojitu

総合スコア2

コンパイルエラー

コンパイルのフェーズで生成されるエラーです。よく無効なシンタックスやタイプが含まれているとき発生します。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

0クリップ

投稿2022/08/19 07:20

前提

Live Sass Compilerを使用していますが、コンパイルされなくなってしまいました。原因はcssフォルダーとsassフォルダーを分けるため自動的にcssフォルダーの作成ができるように設定しようとし、settings.jsonの編集を間違えて行ってしまいました。気づいたときには元に戻すことができずどんどん深みにはまりました。
ただ入力後wacthingの所にsuccessとの表示が出ますが、動作しません。
それ以前は正常に動作していました。

実現したいこと

sassをcssに正常に読み込ませたい。
色々試行錯誤しましたが可能なら初期化するしかないかと考えます。

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

エラーメッセージ

Error: expected "{".

c:\Users\makku\OneDrive\デスクトップ\banana-cafe\scss\style.scss 193:4 root stylesheet

該当のソースコード

Live Sass Compilerの拡張機能の設定>settings.jsonで編集>ユーザー
のコードになります。

{
"emmet.variables": {
"lang": "ja"
},
"emmet.syntaxProfiles": {
"html": {
"filters": "html,c"
}
},
"emmet.preferences": {
"filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
},
"editor.fontFamily": "Ricty Diminished",
"workbench.colorTheme": "rainbow",
"vscode-edge-devtools.mirrorEdits": true,
"workbench.editor.untitled.hint": "hidden",
"files.autoSave": "afterDelay",
"workbench.editorAssociations": {
".zip": "default",
"
.html": "default",
"*.xd": "default"
},
"vscode-edge-devtools.webhint": false,
"editor.renderWhitespace": "all",
"editor.wordWrap": "on",
"bracketPairColorizer.depreciation-notice": false,
"editor.accessibilitySupport": "off",
"editor.unicodeHighlight.invisibleCharacters": false,
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.donotShowInfoMsg": true,
"liveSassCompile.settings.rootIsWorkspace": null,
"liveSassCompile.settings.autoprefix": [

], "liveSassCompile.settings.formats": [ { "format": "compressed", "extensionName": ".min.css", "savePath": null, "savePathSegmentKeys": null, "savePathReplaceSegmentsWith": null }, ], "emmet.triggerExpansionOnTab": true

}

Live Sass Compilerの拡張機能の設定>settings.jsonで編集>ワークスペース
のコードになります。

{
"liveSassCompile.settings.autoprefix": [

"last 2 versions", "ie >= 11", "Android >= 4", "ios_saf >= 8" ], "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/css" } ],

}

試したこと

・ググって該当すると思われるsettings.jsonのコードの書き換えをした。(これが逆に良くなかった)
・OneDriveをリセットした。
・Live Sass Compilerをインストールしなおしてみた。
・再起動してみた。
・初期化するしか方法がないのではないかとググってみるが見当たらない。

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

Windows11
Visual Studio Code 
使用しています。

自ら深みにはまってしまい恥ずかしい限りですが、どうかお力お貸しください。
お願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

エラーメッセージにある「style.scss」でコンパイルエラーが発生し、コンパイルできていないようです。
「style.scss」を修正し、エラーを解消してください。

Live sass compilerでエラーが出力された場合は、途中までコンパイルされた中途半端なcssが出力されることはなく、css自体が出力されないはずです。

投稿2022/08/19 07:35

編集2022/08/19 07:36
Matsumon0104

総合スコア1005

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koojitu

2022/08/19 08:38

解決しました。 確かに style.scss による不具合でした。 作業途中にcssフォルダーとscssフォルダーを分けようとしたことで、 従前のフォルダーとは別のモノにファイルが入り込んでしまっていました。 本当に初歩的なミスでした。 でもご指摘いただかなければ気づけませんした。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問