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

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

新規登録して質問してみよう
ただいま回答率
86.12%
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

解決済

Scssの内容が反映されません。

Wsan
Wsan

総合スコア3

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

0グッド

0クリップ

277閲覧

投稿2022/11/20 11:46

前提

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はインストール済み

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

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
Cocode

総合スコア2125

spoofy_dragon👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。