我正在使用SCSS生成CSS。这是我的main.scss文件中的内容。在它被编译到css之后，它恰好也是一样的。
.my-custom-row {
background-color: bisque;
}
这在我的index.html文件中。这就是全部。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="./stylesheets/main.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!--
Everything is in a grid. A grid is a collection of rows and columns.
Each column can support 12 units. A unit is one element (as far as I can tell).
It can be set so that depending on screen size, the way things are layed out
are different as well.
-->
<title>Jia Hong's website</title>
</head>
<body>
<div class="container">
<div class="row my-custom-row">
<div class="col-sm-4"><div class="p-3 border bg-light">Col One</div></div>
<div class="col-sm-4"><div class="p-3 border bg-light">Col Two</div></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"></script>
</body>
</html>
这是我的项目结构。
.
├── html
│ └── index.html
├── scss
│ └── main.scss
└── stylesheets
├── main.css
└── main.css.map
我看过一些关于如何将css包含到我的网站/项目中的视频，但出于某种原因，它根本不起作用。.my-custom-row内部的背景没有改变。我不知道为什么。
这可能与浏览器缓存有关。你是否尝试过刷新浏览器？每当你对CSS、JavaScript进行更改并查看更新的页面时，你都会看到这种担忧。您可以通过在浏览器上按CTRL+F5来强制刷新，这将获得最新版本。更多信息
首先，请遵循此文件夹结构。这种结构为您的项目提供了坚实的基础或规模。
├── Project Name
│ └── index.html
├── assets
└── images
└── logo.svg
└── other images
└── css
└── main.scss
└── js
└── main.js
之后，请下载并在VS代码编辑器中启用Live Sass编译器，并按照步骤。
要编译CSS，您需要在Live Sass Compilersetting.json文件中添加3行代码，代码为
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": null
}
],
你可以看这个视频https://youtu.be/cpbN0YAW44g
之后，您可以看到在css文件夹中自动创建的main.min.css文件，现在您可以调用类似的css文件
<link href="assets/css/main.min.css" rel="stylesheet">
现在运行并检查；它应该工作：(
.
├── html
│ └── index.html
├── scss
│ └── main.scss
└── stylesheets
├── main.css
└── main.css.map
答案必须与文件路径有关。由于index.html在html文件夹中。我需要转到上一个目录，所以在。
<link href="./stylesheets/main.css" rel="stylesheet">href应改为../stylesheets/main.css