Q&A
・ブラウザ上でソースファイルにはcssが記述されています
・プレビュー側のcssファイルには記述されていません
とのことですが、このプレビュー側とはなんですか？
また、
・ブラウザ上のCSSは記述されているのに、反映されていない
・プレビュー側のCSSには記述されていないのに、反映されている
と読みましたが、これは合っていますか？
初学者です、皆様の知恵をお貸しください。
現在ポートフォリオサイトを製作中で添削、修正中なのですが変更したCSSが効かなくなってしまいました。
具体的に画像中央の.profileにwidth: 600px；を当てたところブラウザで反映されず困っています。
誤字脱字や保存、キャッシュのリセット、linkが読み込まれているか確認しましたが問題は見つからず、ブラウザ上でソースファイルにはcssが記述されていますがプレビュー側のcssファイルには記述されていません。
調べたところ、vs codeでのstyle.scssからstyle.cssへのコンパイルはされているのですが、htmlに読み込ませているstyle.min.cssには変更が適用されていませんでした。設定の変更はしておらず理由がわかりません。
当該ソースコードはすべて載せると記述量が多いため一該当部分をスクリーンショットにて掲載しています。
ご指導・ご指摘いただけると助かります。
Lhankor_Mhy様、混乱を招く説明で申し訳ありません。
Google Chromeのデベロッパーツールで見た際のCSS欄に反映されていなく、その後調べたところhtmlに読み込ませているstyle.min.cssに変更が適用されていないことがわかりました。
リセット等試しましたがなおらず、今まで変更が反映されないことがなかったため困っております。
コンパイラは何を使っていますか？
スクショに表示されているcssの名前はstyle.css
htmlで表示させているcssの名前がstyle.min.css
名前が違うので反映されなくて当たりまえだと思います。
それとも、別途Gulpなどを使ってMinify化してるのでしょうか？
Lhankor_Mhy様、live Sass compilerです。
Jon_do様、恐縮ですがstyle.cssはscssの記述があっているかの確認のために開いています。
（今回初めてSassとBEM記法を使用しているため）
ファイル読み込みの軽量化を図りhtmlのlinkをmin.cssに指定していますが突然、反映されなくなりました。
申し訳ありません、gulp等はまだ学習していないため知識がないためわかりません。
settings.json はどうなっていますか？
settings.json が何のことかわからないようでしたら、お知らせください。
Lhankor_Mhy様、こちらになります。
{
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"files.exclude": {
"**/.classpath": true,
"**/.project": true,
"**/.settings": true,
"**/.factorypath": true
},
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Material Theme Palenight",
"editor.linkedEditing": true,
"workbench.startupEditor": "newUntitledFile",
"workbench.editor.enablePreview": false,
"explorer.confirmDelete": false,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.autoSave": "afterDelay",
"editor.fontSize": 14,
"editor.wordWrap": "on",
"editor.fontFamily": "Ricty Diminished",
"liveServer.settings.donotShowInfoMsg": true,
"workbench.editor.untitled.hint": "hidden",
"[json]": {
"editor.quickSuggestions": {
"strings": true
},
"editor.suggest.insertMode": "replace"
}
}
htmlのlink指定をコンパイルが適用されているstyle.cssに変更したところ正常に動きましたが、根本的な解決にはなっていないので引き続き原因究明にお力添えいただけると幸いです。
回答1件
0
何らかの原因で Live Sass Compiler の設定が消えてしまったのだと思います。
以下を参考に設定し直してみてください。
「Live Sass Compiler」の設定方法 - VScodeでSassを書く | 夢みるゴリラ
vscode-live-sass-compiler/settings.md at master · ritwickdey/vscode-live-sass-compiler · GitHub
投稿2021/05/12 00:37
総合スコア36960
あなたの回答
tips
プレビュー
