angu
@angu

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

scssが反映されません

scssが反映されません

ここに解決したい内容を記載してください。

例)
Javascriptの学習でsassについて勉強していますが、本来であればテストの画面が拡大縮小することによってTestの部分が青やら赤やらに切り替わりますが、なぜか切り替わりません。スクリーンショット 2022-10-02 13.48.55.png
スクリーンショット 2022-10-02 13.49.01.png
スクリーンショット 2022-10-02 13.49.06.png
スクリーンショット 2022-10-02 13.49.20.png

発生している問題・エラー


例)

NameError (uninitialized constant World)

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

該当するソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="sass/mobile.css" media="screen and (max-width: 600px)">
    <link rel="stylesheet" href="sass/desktop.css" media="screen and (min-width: 601px)">
</head>
<body>
    <h1>Test</h1>
</body>
</html>


//以下からscss//
#mobile.css


h1{
    color: red;
}


#desktop.css
h1  {
    color: blue;
}
0

1Answer

それもそのはず,ブラウザが扱えるのはSASS/SCSSではなくCSSですからね,同時にファイルの拡張子やパスの位置がおかしいことなどが原因で反映されていないようです.

次のようにディレクトリ構造及びファイル名を直して実行してみてください.index.htmlhrefに書くべきはindex.html視点の相対パスになります.現状のコードだと次の構造が正しいものになっています.

project
├── index.html
└── sass
    ├── mobile.css
    └── desktop.css

もしSCSSのコンパイラをインストールしているなら,コンパイラに*.scssのファイルを渡してあげて,*.cssとして吐き出させたものを上の構造と同じ位置に置きましょう.今はCSSのスタイルで書かれているのでファイル名の変更だけで大丈夫ですが,SCSSを書かれる予定なら今のうちコンパイルを試しておくべきかと.

その場合は

-   <link rel="stylesheet" href="sass/mobile.css" media="screen and (max-width: 600px)">
-   <link rel="stylesheet" href="sass/desktop.css" media="screen and (min-width: 601px)">
+   <link rel="stylesheet" href="static/mobile.css" media="screen and (max-width: 600px)">
+   <link rel="stylesheet" href="static/desktop.css" media="screen and (min-width: 601px)">

のようにして./sass/*.scssのファイルを./static/*.cssにコンパイルして書き出すようにすることもできます.おそらく元のSCSSファイルを残すにはこちらの方が良いでしょう.

project
├── index.html
├── sass
│   ├── desktop.scss
│   └── mobile.scss
└── static
    ├── desktop.css
    └── mobile.css

実行結果

done.gif

1Like

Comments

  1. @angu

    Questioner

    @PondVillege さん、ご回答いただきありがとうございます!どうやらsassを記述した際にcssにトランスファイルしていなかったのが原因だったようです。

Your answer might help someone💌