Html Chrome中存在@import问题，但在live预览中不存在_Html_Css_Google Chrome_Import

Html Chrome中存在@import问题，但在live预览中不存在

html css google-chrome import

Html Chrome中存在@import问题，但在live预览中不存在,html,css,google-chrome,import,Html,Css,Google Chrome,Import,我正在为某项任务创建一个简单的基于HTML/CSS的网站，我遇到了一个小问题我的main.css文件中大约有500行代码，阅读和滚动变得越来越困难，因此我决定将其拆分为几个.css文件，并使用@import功能将它们链接到一个文件中现在，我的主文件夹中仍然有main.css文件，其中包含以下内容： @导入url（'/css/first.css'） @导入url（'/css/second.css'） . . . @导入url（'/css/last.css'）我使用方括号作为编辑器，虽然方括

我正在为某项任务创建一个简单的基于HTML/CSS的网站，我遇到了一个小问题

我的

main.css

文件中大约有500行代码，阅读和滚动变得越来越困难，因此我决定将其拆分为几个

.css

文件，并使用

@import

功能将它们链接到一个文件中

现在，我的主文件夹中仍然有

main.css

文件，其中包含以下内容：

@导入url（'/css/first.css'）
@导入url（'/css/second.css'）
.
.
.
@导入url（'/css/last.css'）

我使用方括号作为编辑器，虽然方括号live preview的一切都非常完美，但显然，当我通过Chrome手动运行页面时（双击

index.html

），CSS根本不会出现

是的，

/css/

是主文件夹中包含所有其他

.css

文件的文件夹。是的，括号中的实时预览也使用Chrome。

导入规则可以在多个样式文件中调用。这些文件在需要时由浏览器或用户代理调用，例如HTML标记调用CSS

试试下面的代码

@import url("../css/first.css");
@import url("../css/second.css");
@import url("../css/last.css");

或者，您可以通过在标记之间使用html中的链接标记来添加css

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="../css/first.css" type="text/css" />
<link rel="stylesheet" href="../css/second.css" type="text/css" />
<link rel="stylesheet" href="../css/last.css" type="text/css" />
</head>

<body>
</body>
</html>


无标题文件

在实时预览中，如果没有，还必须包括服务器路径。您可能还可以使用

@importurl（“mystyle.css”）。希望我的答案能帮到你。我已经尝试过使用@import url（'mystyle.css'），它仍然是一样的。那么你可能需要找到css
的正确路径，你的地图结构是什么？当您现在在当前css
所在的文件夹中调用/css/first.css
时，是否已清除浏览器中的缓存？方括号中的live preview对其发出的请求没有缓存，而Chrome direct view将尽可能缓存该文件。清除缓存并重试。我也尝试过清理Chrome内部的缓存，没有效果。关于地图结构，我的桌面上只有一个文件夹，有两个子文件夹（图像和css）。所有.html文件都在主文件夹中，除main.css之外的所有.css文件都在css文件夹中。此代码只是回溯1个映射，然后在该位置搜索css
映射和文件。另外，这不是一个有效的答案，因为您不知道当前的地图结构，并且这个答案没有被解释。仍然是一样的。这是有效的，但我不希望每次在我的页面上有一个新的.html文件时都包含3-4个css文件。我想知道为什么在编辑器的实时预览中支持@import，但不是经常支持。你能分享你的网站链接吗？因为我没有/拥有服务器，所以没有实际的网站，它只是在我的域中“托管”。