### 前提・実現したいこと VScodeでHTMLとCSS(SCSS)を用いてポートフォリオを作成しています。効率化のためにLiveServer導入したのですが、CSSが反映されずHTMLだけ表示されます。ただしHTMLを編集すれば更新はされます。さらにフォルダからHTMLファイルを直接開くとCSSがしっかり反映されたページが表示されます。 HTML CSS SCSSファイルはすべて同じフォルダに保存されています。 ### 発生している問題・エラーメッセージ ``` エラーメッセージ ``` ### 該当のソースコード ```HTML Document ``` ### 試したこと・SCSSファイルではなくCSSファイルだけにする・LiveServerの再インストール・PCおよびVSCodeの再起動・HTMLファイルをアクティブ状態にしてからGo Liveを実行する ### 補足情報（FW/ツールのバージョンなど）使用機器はMac Book Airです使用ブラウザはGoogle chrome ![イメージ説明](958f3266d44f81ddffb54923b55cf080.png)

VScodeの拡張機能Live ServerでCSSが反映されない

前提・実現したいこと

VScodeでHTMLとCSS(SCSS)を用いてポートフォリオを作成しています。
効率化のためにLiveServer導入したのですが、CSSが反映されずHTMLだけ表示されます。
ただしHTMLを編集すれば更新はされます。
さらにフォルダからHTMLファイルを直接開くとCSSがしっかり反映されたページが表示されます。

HTML CSS SCSSファイルはすべて同じフォルダに保存されています。

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

エラーメッセージ

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <link
7      rel="stylesheet"
8      href="style.css"
9    />
10    <title>Document</title>

試したこと

・SCSSファイルではなくCSSファイルだけにする
・LiveServerの再インストール
・PCおよびVSCodeの再起動
・HTMLファイルをアクティブ状態にしてからGo Liveを実行する

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

使用機器はMac Book Airです
使用ブラウザはGoogle chrome

Daregada

2020/11/29 06:26

> CSSが反映されずHTMLだけ表示されます。 > ただしHTMLを編集すれば更新はされます。もっと具体的に説明してください。 (1) 「HTMLだけ表示」とは、ブラウザーの画面にスタイルシートが適用されないページが表示されるということですか? (2) 「HTMLを編集すれば更新」とは、HTMLの内容を変更して保存すると、スタイルシートが適用されないページの内容が更新されるということですか? (3) SCSSをLive Serverと組み合わせて使うには、「Live Scss Compiler」が必要ですが、インストール済みですか? (4) VSCodeで、フォルダー(あるいはワークスペース)を開いた状態で作業していますか? 具体的には、左のファイル一覧に特定のフォルダーのファイル一覧が(編集していないファイルも含めて)表示されていますか?

退会済みユーザー

2020/11/29 07:05 編集

質問いただきありがとうございます。１〜２　そいうことです３　インストール済みでコンパイルも済んでいます。４　していますが、念の為補足情報に左側のスクリーンショットを添付しておきました。プログラミング初心者のためなにかミスがあったら教えていただけると幸いです。

Daregada

2020/11/29 07:10

うーん、提示されているHTMLにbodyを追加し、適当なscssを記述して、Live ServerとLive Scss Compilerを有効にすると、普通にスタイルシートが適用されたページが表示されます。

退会済みユーザー

2020/11/29 07:19

自己解決いたしました。パスの指定方法が悪かったようです。質問内容には記載されていないコードだったので回答できないのは当たり前でした。お時間取らせてしまって申し訳ありませんでした。