时间戳

首页 > 解决方案 > SCSS 文件在 index.html 实时服务器上不起作用

html - SCSS 文件在 index.html 实时服务器上不起作用

问题描述

出于某种原因，我的 SCSS 代码在我的 html 文件实时服务器上不起作用。我只是将背景颜色输入为红色，但它没有在实时服务器上显示正确的颜色。html文件中用于链接css文件的脚本应该是正确的。帖子不允许我放太多代码。如果我需要提供更多代码，请告诉我。

有人请帮忙！

谢谢！

这是我的html代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>The 2021 Frontend Developer Crash Course</title>
    <link rel="stylesheet" href="css/main.css"/>

这是我的scss文件代码：

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,700&display=swap");
ody {
  background: #d81c1c;
  margin: 0;
  font-family: "Poppins";
}

.navbar {
  background: rgb(173, 25, 25);
}

标签： htmlcssvisual-studio-code

解决方案

所以，你在这里有一些问题。

首先，正如 Akshay 指出的，您在 css 文件中的第一个标签是“ody”。我假设这应该是“身体”。

其次，在为背景设置颜色时，您应该使用背景颜色而不是背景。背景 css 用于分配图像。

最后，你没有提到，但是scss需要编译成css。我假设这个 scss 文件是 main.scss 并且您正在使用 Visual Studio 编译到 main.css？

为了确保你的 CSS 是正确的，我会使用 Chrome 中的开发者工具。在 chrome 中按 F12，选择正确的元素，然后在“样式”下添加您要使用的 css。它让你che

推荐阅读