html - SCSS-Variables 不显示在前端

标签 html css variables sass phpstorm

我正在构建我的第一个网站并希望我的样式表是 *.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/

相关文章:

html - 自定义css文件显示图标

variables - Prolog-分支警告中的单例变量

html - Safari div 不能正常溢出

javascript - 响应式 Google 图表 - 柱形图

html - 使图像链接适合容器 div 并将其中的文本居中

html - 当文档高度大于窗口高度时,背景渐变会重复出现

html - 图像在 div 焦点中重叠

php - 带有 $variable 的 LIKE 运算符

php - 在 if 条件下更改全局变量值,然后在 else 中访问该值

javascript - 获取是否在 jquery/ES6 中选中复选框