scssが反映されない

前提・実現したいこと

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

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

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

scss
1html, body,
2ul, ol, li,
3h1, h2, h3, h4, h5, h6, p,
4form, input, div {
5  margin: 0;
6  padding: 0;
7}
8
9@font-face {
10	font-family: 'Noto Sans JP';
11	src: url("/noto-sans-jp/NotoSansJP-Regular.otf");
12}
13
14body {
15  font-family: "Noto Sans JP", sans-serif;
16}
17
18li {
19  list-style: none;
20}

該当のソースコード

試したこと

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

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

Windows10,vscode,Googlechrome

m.ts10806

2020/09/16 01:10

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

koccey

2020/09/16 01:17

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

Lhankor_Mhy

2020/09/16 01:26 編集

コンパイルは VSCode の拡張を使っているのですか？ https://asamone.com/2018/09/30/sass-vscode/

koccey

2020/09/16 01:38

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

m.ts10806

2020/09/16 01:39 編集

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

m.ts10806

2020/09/16 01:40 編集

質問は編集できますので適宜ご対応ください。あぁ、解決か・・・。 https://teratail.com/help#resolve-myself

koccey

2020/09/16 01:54

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

m.ts10806

2020/09/16 02:09

こちらはあくまで質問への追記修正依頼です。質問本文を編集して返すのが慣習です。で、解決されたようですがベストアンサーに選んだ回答と解決した内容が合っていません。下記ガイドラインに倣い、自身で回答を書いて自己解決としてください。 https://teratail.com/help#resolve-myself

行動規範の内容に同意します

回答2件

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ファイルを保存するタイミングで、そのファイルをコンパイルしてくれます。

投稿2020/09/16 03:36

Daregada

総合スコア11990

ベストアンサー

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

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

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

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

scss
1@font-face {
2 font-family: 'Noto Sans JP';
3 font-style: normal;
4 font-weight: 400;
5 src: url('/noto-sans-jp/NotoSansJP-Regular.otf') format('opentype');
6}
7body {
8  font-family: "Noto Sans JP", sans-serif;
9}

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

投稿2020/09/16 01:55

kuma_kuma_

総合スコア2506

koccey

2020/09/16 01:59

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

Lhankor_Mhy

2020/09/16 02:08

> kuma_kuma_さん横からすみません。 text/scss という MINE type を初めて見たのですが、出典を教えていただけますか？なお、IANA の MINE type 一覧では確認することができませんでした。 https://www.iana.org/assignments/media-types/media-types.xhtml なお、ご提示のlink要素を試してみましたが、当方の環境ではSCSSを読み込んでスタイルを適用することができませんでした。どのような環境を想定されたコードなのか教えていただけますか？ --- すみませんが、誤回答ではないかと感じています。お返事をいただけるまで低評価させていただきますので、悪しからずご理解ください。

kuma_kuma_

2020/09/16 02:36

IANA の MINE type 一覧では載っていないかもしれません。 https://neos21.hatenablog.com/entry/2017/12/09/080000 もともとtype指定は読み込むファイルの形式を表すもので、ふつうは拡張子などで判断されますがうまく判断できない場合type指定で"text/scss"(テキストのscss形式ファイル)とすることでscss形式ファイルと認識されます。 scssはcssとほぼ記載方法が一緒の為、"text/scss"を記載するのが好ましいという事です。

Lhankor_Mhy

2020/09/16 03:00

JavaScriptのライブラリを2つ使う必要があるのですね。理解しました。ただ、ご紹介いただいた記事に「本ライブラリ、実用性はほとんどない。お遊びとして使うに留めてほしい。」と書かれています。そのようなライブラリを、初心者にすすめるのはいかがなものかな、と感じました。また、ライブラリが必要であることを示していないことも問題であると思います。別の初心者の方が検索でこの質問にたどり着いた時に有害であると思いますので、すみませんが、ご回答の変更がなされるまで低評価のままとさせていただきたいと思います。よろしくお願いいたします。

kuma_kuma_

2020/09/16 04:19

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"に変更をお願いしたかぎりです。（問題点の切り分けです）初心者の方にこそ一歩ずつ確認をしなければならないと私は思いますが納得いきませんか？あとこれ以上ここに書きこまないでください質問者様の迷惑となります。もし続けるなら別に質問を立てて下さい。