0
最後に、Webデザインを少しでも探検する時間がありましたが、今は自分のscssコードがコンパイルされません。クラップSCSSがマッピング/コンパイルしていない
私は最初に自分の変更がライブプレビュー（ブラケット）に表示されていないことに気付きました。私はその後、対応する.cssファイルを確認しました。そこでは、私の変更がもうマップされていないことがわかりました。クラップ
すべてを再起動しましたが（ブラケット、Chrome、コンピュータ）、それでも動作しませんでした。 .scssコードをクリップボードにコピーし、すべてのファイル（この場合はhome.scss、home.css、およびhome.css.map）を取り除き、新しいhome.scssファイルを作成しました。マッパーと.cssファイルが生成されたので、まだ動作しています。私はその後、自分のコードを.scssファイルにコピーして保存しましたが、何もマッピングされていませんでした。何が間違っているのか分からない。誰かがこれまでに遭遇しましたか？昨日すべてがうまくいっていた。
それが助け場合は、ここではコードです：
home.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,700" rel="stylesheet">
<link rel=stylesheet type="text/css" href="../css/home.css">
</head>
<body>
<div class="first">
<img src="../images/HN_LogoWhite.svg" />
</div>
<div class="second">
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur voluptatibus sed iusto quaerat nesciunt eius incidunt saepe quam, unde quisquam nobis maiores similique at illo soluta, iure ipsum! Minima, possimus?</section>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, placeat ducimus quisquam, ullam quae temporibus esse fugiat nostrum quaerat eos facilis, excepturi labore laboriosam molestiae. Error libero ea saepe officiis.</section>
</div>
</body>
</html>
home.scss
@import 'fontsAndColors';
/* Setting frame */
* {
box-sizing: border-box;
}
html {
font-family: $main_font;
}
body {
background-color: $hn_white;
margin: 0;
}
.first {
background-image: url('../images/TopUnderwater.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
display: block;
margin: auto;
width: 100vw;
height: 100vh;
img {
width: 20%;
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}
.second {
height: 100vh;
text-align: center;
background-color: $hn_green;
padding: 5%;
section {
top: 10%;
width: 30%;
margin: 10%;
padding: 10%;
float: left;
display: block;
border: solid 1em $hn_green;
position: relative;
overflow:hidden;
}
}
_fontsAndColors.scss
$hn_green: #6ca66b;
$hn_blue: #3398cc;
$hn_white: #ffffff;
$main_font: font-family: 'Oswald', sans-serif;
@mixin hn_bg_gr1($col1, $col2) {
background: $col1;
background: -webkit-linear-gradient(left top, $col1, $col2); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, $col1, $col2); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, $col1, $col2); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, $col1, $col2); /* Standard syntax (must be last) */
}
@mixin hn_bg_gr2($col1, $col2) {
background: $col1; /* For browsers that do not support gradients */
background: -webkit-linear-gradient($col1, $col2); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient($col1, $col2); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient($col1, $col2); /* For Firefox 3.6 to 15 */
background: linear-gradient($col1, $col2); /* Standard syntax */
}
と、妙には、 home.css.map
{
"version": 3,
"file": "home.css",
"sources": [
"home.scss",
"_fontsAndColors.scss"
],
"mappings": "",
"names": []
}
おそらくそれは関係ありませんが、GoogleフォントからOswaldフォントを追加した直後に問題が発生しました。
ありがとうございます！
$ main_fontを試してください： 'Oswald'、sans-serif;または$ main_font： "font-family： 'Oswald'、sans-serif"; – jseezo
ええ、間違いは間違いでした。すぐには動作しませんでしたが、もう少し手を加えて、マッパが再び目を覚ましました。ヒントをありがとう！ – Inkidu616