Question

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>

scss

// 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;
}

Answer 1

旧的浏览器缓存方案

尝试将?v=2添加到css文件的href属性。总结果：

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

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

注意：您应该始终增加数量，以便立即查看最新版本。使用webpack或gulp之类的大多数模块捆绑器，您可以有一个自动化的过程来生成此添加的查询字符串值，该过程通过对内容进行哈希处理（更好地用于生产，但是对于开发而言可能更慢）来计算，或者通过每次编译生成一个随机数来计算（更好地发展）。

但是，如果您选择不执行任何操作，则浏览器将遵循服务器已生成的文件的“ cache-control”标头。某些服务器的默认值为max-age=86400，这意味着它将在24小时后停止使用缓存的版本，并将获取较新的版本以再次存储到缓存中。

*在特定情况下，这不是实际的解决方案，但这可能是其他人的原因。

引用不匹配

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

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

Answer 2

@JC Nolan “您可以尝试使用随机数而不是“2” - 或者清除缓存，尝试使用其他浏览器或其他计算机。如果这不起作用，则可能是其他原因。可能是内部缓存在服务器端很好。添加一个“盐”（CSS 的内部随机元素也可以测试它。”

对我来说，清除浏览器缓存有效！

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

2 个答案: