scssが反映されない
解決済
回答 2
投稿
- 評価 0
- クリップ 0
- VIEW 71
前提・実現したいこと
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
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
0
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ファイルを保存するタイミングで、そのファイルをコンパイルしてくれます。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
-1
まず拡張子を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'が参照できている事を確認してみて下さい。
投稿
![kuma_kuma_](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="95" height="95"><rect fill-opacity="0"/></svg>){kind=small}
score 60
-
回答の評価を上げる
以下のような回答は評価を上げましょう
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
-
IANA の MINE type 一覧では載っていないかもしれません。
https://neos21.hatenablog.com/entry/2017/12/09/080000
もともとtype指定は読み込むファイルの形式を表すもので、ふつうは拡張子などで判断されますが
うまく判断できない場合type指定で"text/scss"(テキストのscss形式ファイル)とすることでscss形式ファイルと認識されます。
scssはcssとほぼ記載方法が一緒の為、"text/scss"を記載するのが好ましいという事です。 -
JavaScriptのライブラリを2つ使う必要があるのですね。
理解しました。
ただ、ご紹介いただいた記事に「本ライブラリ、実用性はほとんどない。お遊びとして使うに留めてほしい。」と書かれています。
そのようなライブラリを、初心者にすすめるのはいかがなものかな、と感じました。
また、ライブラリが必要であることを示していないことも問題であると思います。
別の初心者の方が検索でこの質問にたどり着いた時に有害であると思いますので、すみませんが、ご回答の変更がなされるまで低評価のままとさせていただきたいと思います。
よろしくお願いいたします。 -
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"に変更をお願いしたかぎりです。（問題点の切り分けです）
初心者の方にこそ一歩ずつ確認をしなければならないと私は思いますが納得いきませんか？
あとこれ以上ここに書きこまないでください質問者様の迷惑となります。
もし続けるなら別に質問を立てて下さい。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.93%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼