gpt4 book ai didi

css - SCSS 正在编译为 CSS,但更改未显示在浏览器中

转载 作者:行者123 更新时间:2023-11-28 14:25:15 24 4
gpt4 key购买 nike

SASS 新手,已通过 Scout App 设置预处理器。当我点击保存时,Scout 通知我更新已经完成并且更改显示在 CSS 中,但这些更改不会显示在我的浏览器上。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> The Green Keeper </title>
<link href="https://fonts.googleapis.com/css?family=Raleway|Yesteryear" rel="stylesheet">
<link href= "css/style.css" rel="stylesheet">
</head>
<body>
<header>
<h1> The Green Keeper </h1>
</header>
</body>
</html>

跨界

// VARIABLES -------------------------------------->

$color-primary: #E5E5E5;

$font-stack-primary: 'Yesteryear', cursive;
$font-stack-secondary: 'Raleway', sans-serif;

// BASE -------------------------------------->

h1 {
font-family: $font-stack-primary;
color: $color-primary;
}

最佳答案

旧的浏览器缓存方案

尝试在css文件的href属性中加入?v=2。总结果:

<link href="css/style.css?v=2" rel="stylesheet">

有时浏览器会使用同一文件的旧缓存版本,因为它会尝试通过按名称保存引用文件来优化页面加载时间。使用提到的技巧,您可以强制浏览器重新加载更新文件的新版本。有人将其称为带有缓存清除的版本控制。

注意:您应该始终增加数字,以便立即看到最新的版本。对于大多数模块打包器,如 webpack 或 gulp,你可以有一个自动化的过程来生成这个添加的查询字符串值,通过对内容进行哈希计算(对生产更好,但对开发来说可能更慢),或者通过每次编译生成一个随机数(更利于发展)。

但是,如果您选择什么都不做,浏览器将遵循服务器生成的文件的“cache-control” header 。一些服务器的默认值为:max-age=86400,这意味着它会在 24 小时后停止使用缓存的版本,并会获取更新的版本再次存储到缓存中。

*这不是这个特定案例中的实际解决方案,但这可能是其他人的原因。

引用不匹配

此特定问题的解决方案是在 href 属性中引用不正确的路径。我们在浏览器的开发工具中检查“网络”选项卡时发现错误:“无法加载资源:net::ERR_FILE_NOT_FOUND”。解决方案是引用正确的路径:

<link href= "output/style.css?v=2" rel="stylesheet">

关于css - SCSS 正在编译为 CSS,但更改未显示在浏览器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54791626/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com