Q&A
前提
scssファイルの内容が反映されません。
実現したいこと
cssの代わりにscssを使用したいですが、コンパイル時にエラーが出ます。
ここに実現したいことを箇条書きで書いてください。
発生している問題・エラーメッセージ
エラーメッセージ ```Compilation Error Error: expected "{". ╷ 1 │ <!DOCTYPE html> │ ^ ╵ ### 該当のソースコード ```ここに言語名を入力 html ,scss ソースコード ```[index.html] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>profile</title> <link rel="stylesheet" href="stylesheet.scss"> </head> <body> <div class="top"> <h1 class="title">Profile</h1> <a class="toptab" href="#">about</a> <a class="toptab" href="#">Bicycle</a> </div> <div class="header1"> <form class="search"> <h3>スレッド検索</h3> <input class="box" type="search" name="search" placeholder="キーワードを入力"> <input class="button1" type="submit" name="submit" value="検索"> </form> <div class="new"> <h3>ジャンル別スレッド</h3> </div> </div> <div class="header2"> </div> </body> </html> ------------------------------- [stylesheet.scss] .top{ .title{ color: white; width:120px; height:40px; } } ### 試したこと ここに問題に対して試したことを記載してください。 エラー内容をGoogleで検索しました。同様のエラーが href="stylesheet.scss"の部分で拡張子が.cssとなっている場合に発生するようですが、自分の場合は.scssとなっているので該当せず、エラーの発生理由がわかりません。 ### 補足情報（FW/ツールのバージョンなど） Live Sass Compilerはインストール済み
回答1件
0
ベストアンサー
scssファイルはあくまで作業用のファイルです。
htmlファイルで読み込むのはコンパイルしたcssファイルです。
scssファイルは理解できません。
コンパイルされたcssファイルを読み込んでください。
🚫 間違い
html
1<link rel="stylesheet" href="stylesheet.scss">
✅ 正しい
html
1<link rel="stylesheet" href="stylesheet.css">
コンパイル時にエラーが出ます。
scssをコンパイルするというのは、scssファイルをcssに変換することです。
用語または手順を間違って理解しているように思います。
🚫 間違い
scssで書く → htmlでscssファイルを読み込む → cssに変換してくれる
✅ 正しい
scssで書く → cssに変換する → htmlでcssファイルを読み込む
投稿2022/11/20 11:57
編集2022/11/20 12:06
総合スコア2314
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。