scssが反映されない

Question

前提・実現したいこと

progateでScss記法を学びました。
stylesheet.scssファイルでアウトプットしようとしたところ、内容がまったく反映されません。
（Scss記法を試す前段階で、すでに反映されません。）
.Scss記法は.scssファイルに記載すると認識していたのですが、違うのでしょうか？

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

 <link rel="stylesheet" href="stylesheet.css">

html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
  margin: 0;
  padding: 0;
}

@font-face {
	font-family: 'Noto Sans JP';
	src: url("/noto-sans-jp/NotoSansJP-Regular.otf");
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

li {
  list-style: none;
}

該当のソースコード

試したこと

.cssファイルにcss記法で書けば反映される。

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

Windows10,vscode,Googlechrome

Comments

[m.ts10806]

scssはコンパイルされたのでしょうか。

[koccey]

vscodeのLiveServerを使用して、Googlechromeで確認している段階になります。

[Lhankor_Mhy]

コンパイルは VSCode の拡張を使っているのですか？

https://asamone.com/2018/09/30/sass-vscode/

[koccey]

VSCode の拡張が機能していませんでした。
できました！ありがとうございました。

[m.ts10806]

では、聞き方を変えましょう。
「コンパイル」が何のことを言っているか分かっていますか？
ファイル名からコード編集、確認までの詳細手順を全てご提示ください。
情報が足りなさ過ぎて応えようがないです。

[m.ts10806]

質問は編集できますので適宜ご対応ください。

あぁ、解決か・・・。
https://teratail.com/help#resolve-myself

[koccey]

問題解決致しました。ご質問いただきありがとうございました。

[m.ts10806]

こちらはあくまで質問への追記修正依頼です。質問本文を編集して返すのが慣習です。

で、解決されたようですがベストアンサーに選んだ回答と解決した内容が合っていません。
下記ガイドラインに倣い、自身で回答を書いて自己解決としてください。
https://teratail.com/help#resolve-myself

Answer 1

SassのSCSS構文で書かれたファイル(通常、拡張子に.scssが付く)は、HTMLファイルから直接参照されることはありません。SCSSファイルの内容をCSS構文に変換したファイル(通常、拡張子に.cssが付く)を生成(コンパイル)し、HTMLファイルからはCSSファイルを参照します。

ということで、テキストエディターでSCSSファイルを作成したら、何らかの方法でCSSファイルを生成する必要があります。手作業でやっても構いませんが、VSCodeには、この作業を自動的に行なってくれる拡張機能がいくつか存在します。すでに拡張機能のLive Serverを使っているようなので、おそらく「Live Sass Compiler」を導入したのですかね。

Live Sass Compilerは、VSCodeのウィンドウ右下(ステータスバー)に表示される「Watch Sass」をクリックすると、VSCodeで現在開いているフォルダー/ワークスペースのSCSS/SASSファイルをすべてコンパイルしなおしてから、ファイルの監視状態に入ります。その後、ユーザーがSCSS/SASSファイルを保存するタイミングで、そのファイルをコンパイルしてくれます。

Answer 2

まず拡張子をscssにしてtypeもscssとして下さい

<link rel="stylesheet" type="text/scss" href="stylesheet.scss">

内容がまったく反映されません。

/noto-sans-jp/NotoSansJP-Regular.otfが適応されないのですか？

@font-face {
 font-family: 'Noto Sans JP';
 font-style: normal;
 font-weight: 400;
 src: url('/noto-sans-jp/NotoSansJP-Regular.otf') format('opentype');
}
body {
  font-family: "Noto Sans JP", sans-serif;
}

'/noto-sans-jp/NotoSansJP-Regular.otf'が参照できている事を確認してみて下さい。

Comments

[koccey]

ご回答いただきありがとうございます。
VSCode の拡張が機能していなかったことが原因で、無事解決致しました。

[Lhankor_Mhy]

> kuma_kuma_さん

横からすみません。

text/scss という MINE type を初めて見たのですが、出典を教えていただけますか？
なお、IANA の MINE type 一覧では確認することができませんでした。

https://www.iana.org/assignments/media-types/media-types.xhtml

なお、ご提示のlink要素を試してみましたが、当方の環境ではSCSSを読み込んでスタイルを適用することができませんでした。どのような環境を想定されたコードなのか教えていただけますか？

---

すみませんが、誤回答ではないかと感じています。
お返事をいただけるまで低評価させていただきますので、悪しからずご理解ください。

[kuma_kuma_]

IANA の MINE type 一覧では載っていないかもしれません。
https://neos21.hatenablog.com/entry/2017/12/09/080000

もともとtype指定は読み込むファイルの形式を表すもので、ふつうは拡張子などで判断されますが
うまく判断できない場合type指定で"text/scss"(テキストのscss形式ファイル)とすることでscss形式ファイルと認識されます。
scssはcssとほぼ記載方法が一緒の為、"text/scss"を記載するのが好ましいという事です。

[Lhankor_Mhy]

JavaScriptのライブラリを2つ使う必要があるのですね。
理解しました。

ただ、ご紹介いただいた記事に「本ライブラリ、実用性はほとんどない。お遊びとして使うに留めてほしい。」と書かれています。
そのようなライブラリを、初心者にすすめるのはいかがなものかな、と感じました。
また、ライブラリが必要であることを示していないことも問題であると思います。

別の初心者の方が検索でこの質問にたどり着いた時に有害であると思いますので、すみませんが、ご回答の変更がなされるまで低評価のままとさせていただきたいと思います。
よろしくお願いいたします。

[kuma_kuma_]

Lhankor_Mhyさん

scss形式を直接使用するならこんなライブラリもあります。
https://www.npmjs.com/package/@neos21/in-browser-sass?activeTab=readme

>ただ、ご紹介いただいた記事に「本ライブラリ、実用性はほとんどない。お遊びとして使うに留めてほしい。」と書かれています。

これはファイルサイズが大きめだからでしょ？
他のライブラリでも同じような大きさですがレスポンス的には問題ないですよ(キャッシュもききますし)
動作も正常に行われています。

ブラウザ上でscssファイルをコンパイルして適応するライブラリは何種類かあります。
その為cssと差別する意味合いでtype="text/scss"が必要になってきます。
※実験しましたが拡張子より優先されました。

htmlの詳細な記載が無く、cssの記載がもない為
どんなライブラリを使っているのかまたはcssに変換して使っているのか
確かめるためにtype="text/scss"に変更をお願いしたかぎりです。（問題点の切り分けです）

初心者の方にこそ一歩ずつ確認をしなければならないと私は思いますが納得いきませんか？

あとこれ以上ここに書きこまないでください質問者様の迷惑となります。
もし続けるなら別に質問を立てて下さい。

[kyoya0819]

というより、特別なライブラリを使う必要があるのならばそのように回答に書いておけばよかったのでは？

> 動作も正常に行われています。

そう言って使い始めると大抵事故ります。

[kyoya0819]

ちなみに低評価つけてます。