Q&A
スクリーンショットを見る限り、cssフォルダが空であるようなのですが、実際には中身がありますか？
実現したいこと
ブラウザにCSSを反映されるようにしたい
発生している問題・分からないこと
sassを使用しています。
ブラウザでCSSファイルが読み込めない。
ブラウザからデベロッパーツールを使用してConsoleタグを開いたら下記画像が表示されていました。
VSコードのフォルダ、html等です。
/css/style.css をVSコード上からリンク先へと飛ぶと下記画像が表示されます。
CSSファイルの画像です。
追加修正です。
下記画像のように修正しました。
リンク先に飛べるようになり、デベロッパーツールでエラーはなくなったのですが、CSSは反映されないままです。
エラーメッセージ
error
1style.cssを開くことができません。
該当のソースコード
特になし
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
キャッシュクリアしても変化なしでした。
補足
特になし
中身はありません。
なるほど。とりあえず、style.css を作ってみるのはどうでしょうか。
もしかすると、コンパイラの設定の関係で別のフォルダに作成されているかもしれませんので、確認してみるといいかもしれません。
質問の編集拝読。
SCSSファイルをブラウザは解釈できませんので、きちんとコンパイルして style.css ファイルを作り、それを適切に css フォルダに配置してみてください。
sassを使っているのでstyle.cssをCSSに作るとsassが反映されないのではないでしょうか？
sass をブラウザは解釈できませんので、コンパイルして CSS にし、それを読み込ませる必要があるということです。
基本的な知識が不足しているように思いますので、なにか入門書みたいなものを読んだ方がいいかもしれませんね。
CSSのリンク先を<link rel="stylesheet" href="/sass/style.scss">へと変更したのですが、この変更は必要がないということでしょうか？
はい、そうですね。
スクリーンショット を見た感じ、Live Sass Compiler をインストールしてませんか？
その設定が上手くいっていれば、CSSファイルが生成されそうな気がします。
ありがとうございます！
コンパイルが何か分からなかったので時間が掛かりましたが、コメントのヒントを手掛かりにコンパイルしてブラウザに反映させることができました。
本当にありがとうございました！
ご解決されて何よりです。
お手数ですが、BAを決めるか自己解決をするかして、質問を解決済にしてください。
https://teratail.com/help#resolve-question
https://teratail.com/help#resolve-myself
回答1件
0
ベストアンサー
存在するファイルを指定してください
投稿2024/05/09 08:49
総合スコア118273
<link rel="stylesheet" href="sass/style.scss">とリンクを変更したのですがデベロッパーのconsoleでエラーは出なかったのですが、CSSは反映されないのは変化ない状態です。
あなたの回答
tips
プレビュー
