SCSS компилируется в CSS, но изменения не отображаются в браузере - PullRequest
0 голосов
/ 20 февраля 2019

Новичок в 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;
}

1 Ответ

0 голосов
/ 20 февраля 2019

Старый сценарий кэширования браузера

Попробуйте добавить ?v=2 к атрибуту href файла css.Общий результат:

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

Иногда браузер использует старую кэшированную версию того же файла, поскольку пытается оптимизировать время загрузки страницы, сохраняя ссылочные файлы по их именам.С помощью упомянутого трюка вы можете заставить браузер перезагрузить новую версию обновленного файла.Некоторые называют это контролем версий с кэшированием.

Примечание: вы всегда должны увеличивать число, чтобы сразу увидеть самую последнюю версию.В большинстве пакетов модулей, таких как webpack или gulp, вы можете иметь автоматизированный процесс, который генерирует это добавленное значение строки запроса, вычисляемое путем хеширования содержимого (лучше для производства, но может быть медленнее для разработки) или путем генерирования случайного числа для каждой компиляции(лучше для разработки).

Однако, если вы решите ничего не делать, браузер будет следовать заголовку «cache-control» файла, который сгенерировал сервер.Некоторые серверы имеют значение по умолчанию: max-age=86400, что означает, что он прекратит использовать кэшированную версию через 24 часа и получит более новую версию для повторного сохранения в кеше.

* Это не былофактическое решение в этом конкретном случае, но это может быть причиной для кого-то еще.

Несоответствие ссылок

Решением для этой конкретной проблемы была ссылка на неверный путь внутриhref атрибут.Мы обнаружили ошибку при проверке вкладки «Сеть» внутри devtools браузера: «Не удалось загрузить ресурс: net :: ERR_FILE_NOT_FOUND».Решением было указать правильный путь:

<link href= "output/style.css?v=2" rel="stylesheet">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...