我正在构建我的第一个网站并希望我的样式表是 *.scss。
我正在使用带有文件观察器的 PhpStorm 来自动编译 (Node.js),它可以很好地处理所有内容,但是如果我使用一个简单的颜色变量,例如背景颜色它不会引发任何错误,但它不会显示在我的页面上。
这是测试用的:
$color-red: #FF0000;
$color-green: #00FF00;
$color-blue: #0000FF;
h1 {
color: $color-red;
}
p {
color: $color-green;
}
a {
color: $color-blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="test.scss">
</head>
<body>
<h1>A Red Title</h1>
<p>A green paragraph</p>
<a href="">A Blue Link</a>
</body>
</html>
最佳答案
<link type="text/css" rel="stylesheet" href="test.scss">
您正在尝试将原始 SASS 作为浏览器中的 CSS 文件使用。您需要使用 SASS 编译器输出的编译后的 CSS 文件。
关于html - SCSS-Variables 不显示在前端,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56884802/