无法将我的SASS链接到Atom中的HTML

时间:2017-10-31 17:30:29

标签: html css sass

我正在寻找在Atom中开始编码,而我在开始工作时遇到了麻烦。我似乎无法将style.scssindex.html联系起来。这是我的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel"stylesheet" type="text/css" href="style.min.css">
  <title>Document</title>
</head>
<body>
<h1>This is a square</h1>
<div class="square"></div>
</body>
</html>

这就是我在style.scss中所拥有的内容,当符合后style.min.css

//Variables
$lightblue: #b8fdfb;
//CSS
.square {
  width: 100px;
  height: 100px;
  background-color: $lightblue;
}

This is all that shows up in my local server

1 个答案:

答案 0 :(得分:2)

您无法将 SASS 附加到 HTML 。您首先需要先将其编译为 CSS &amp;然后使用标头中的<link>标记将其链接到 HTML 。像:

<link rel="stylesheet/css" type="text/css" href="style.min.css" />

您需要一个预处理器将SASS转换为CSS。您可以使用许多工具,例如WebpackPrepros

看看这个reference。希望这有帮助!