SCSS未映射/编译

终于花了一些时间来探索一下网页设计，但现在我的scss代码不能编译。废话。SCSS未映射/编译

我首先注意到我的更改没有在实时预览（支架）中显示。然后我检查了相应的.css文件，在那里我可以看到我的更改没有被映射了。废话。

我重新启动了一切（支架，Chrome，电脑），但它仍然无法工作。然后，我将我的.scss代码复制到剪贴板，摆脱了所有文件（本例中为home.scss，home.css和home.css.map），并创建了一个新的home.scss文件。 mapper和.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 Fonts中添加Oswald字体后不久就出现问题。

谢谢！

来源

2017-02-22 Inkidu616

尝试$ main_font：'Oswald'，sans-serif;或$ main_font：“font-family：'Oswald'，sans-serif”; – jseezo

是的，这绝对是一个错误:)没有马上工作，但更多地拨弄，映射器再次醒来。谢谢你的提示！ – Inkidu616

所有不错，看起来像一个愚蠢的错误，通过在_fontsAndColors文件中说明：$ main_font：font-family：'Oswald'，sans-serif;

这导致了语法错误。 font-family：font-family：...

谢谢jseezo！

来源

2017-02-22 20:13:39 Inkidu616

SCSS未映射/编译

回答

相关问题