OfflineGenerationError - Key not in Manifest Json

Question

The Django Error:

OfflineGenerationError at / You have offline compression enabled but key "e3efe8ea14c9eeeff843e0280b54e1d92c293a5018e6d4a0be93a65997d8e246" is missing from offline manifest. You may need to run "python manage.py compress". Here is the original content:

Then it shows my CSS file content.

{% load static %}
@font-face {
    font-family: 'fontawesome';
    src: url('{% static "global/fontawesome-5.0.13/fa-regular-400.woff2" %}') format('woff2'), url('{% static "global/fontawesome-5.0.13/fa-regular-400.woff" %}') format('woff');
}
@font-face {
    font-family: 'NotoSans';
    src: url(" {% static 'global/NotoSans-Regular.ttf' %}") format('truetype');
}
@font-face {
    font-family: 'NotoSans';
    src: url(" {% static 'global/NotoSans-BoldItalic.ttf' %}") format('truetype');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'NotoSans';
    src: url(" {% static 'global/NotoSans-Italic.ttf' %}") format('truetype');
    font-style: italic;
}
@font-face {
    font-family: 'NotoSans';
    src: url(" {% static 'global/NotoSans-Bold.ttf' %}") format('truetype');
    font-weight: bold;
}
@font-face {
    font-family: 'NotoSerif';
    src: url(" {% static 'global/NotoSerif-Regular.ttf' %}") format('truetype');
}
@font-face {
    font-family: 'NotoSerif';
    src: url(" {% static 'global/NotoSerif-BoldItalic.ttf' %}") format('truetype');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'NotoSerif';
    src: url(" {% static 'global/NotoSerif-Italic.ttf' %}") format('truetype');
    font-style: italic;
}
@font-face {
    font-family: 'NotoSerif';
    src: url(" {% static 'global/NotoSerif-Bold.ttf' %}") format('truetype');
    font-weight: bold;
}
{% if newdesign %}
@font-face {
    font-family: Concourse T3;
    src: url('{% static "global/concourse_t3_bold_italic-webfont.woff2" %}') format('woff2'),
         url('{% static "global/concourse_t3_bold_italic-webfont.woff" %}') format('woff'),
         url('{% static "global/concourse_t3_bold_italic-webfont.ttf" %}') format('ttf');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: Concourse T3;
    src: url('{% static "global/concourse_t3_bold-webfont.woff2" %}') format('woff2'),
         url('{% static "global/concourse_t3_bold-webfont.woff" %}') format('woff'),
         url('{% static "global/concourse_t3_bold-webfont.ttf" %}') format('ttf');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: Concourse T3;
    src: url('{% static "global/concourse_t3_italic-webfont.woff2" %}') format('woff2'),
         url('{% static "global/concourse_t3_italic-webfont.woff" %}') format('woff'),
         url('{% static "global/concourse_t3_italic-webfont.ttf" %}') format('ttf');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: Concourse T3;
    src: url('{% static "global/concourse_t3_regular-webfont.woff2" %}') format('woff2'),
         url('{% static "global/concourse_t3_regular-webfont.woff" %}') format('woff'),
         url('{% static "global/concourse_t3_regular-webfont.ttf" %}') format('ttf');
    font-weight: normal;
    font-style: normal;
}
{% endif %}

/* Global CSS Vars */
:root {
    --header-color: #fafafa;
    --themed-text: #0fbe98;
    --dark: #2a2e3a;

    --parakeet: #0fbe98;
    --silver: #fafafa;
    --forest-green: #228B22;
    --putting-green: #699864;
    --sap-green: #308014;
    --irish-flag-green: #009900;
    --olive-green: #3D9970;
}
/* THEMES */
.main-header-theme {
    background-color: #fafafa;
    background-color: var(--header-color);
}
.main-logo-theme {
    background: url('{% static "global/trellis-word-logo.svg" %}') no-repeat;
}
.main-logo-motto-theme {
    background: url({% static 'global/trellis-word-motto.svg' %}) no-repeat;
}
.logo-green {
    background: url('{% static "global/trellis-word-green-300.png" %}') no-repeat;
}
.text-theme {
    color: #0fbe98;
    color: var(--themed-text);
}

/* width */
::-webkit-scrollbar {
    width: 10px;
    border-radius: 4px;
}
/* Track */
::-webkit-scrollbar-track {
    background: #f4f4f4;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #c7c9ca;
    border-radius: 4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: silver;
}

html {
    min-height: 100%;
}
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    {% if newdesign %}
    font-family: Concourse T3, sans-serif, 'fontawesome';
    font-size: 18px;
    {% else %}
    font-family: sans-serif, 'fontawesome';
    font-size: 16px;
    {% endif %}
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
input:focus, textarea:focus {
    outline: none;
}
....................

The first line below in base.html is what triggers the "missing" key. But the key should be in the file, I've ran the compress.

{% compress css %}
    <style>
    {% include "global/base.css" %}
    </style>
    {% block section-style %}{% endblock %}
    {% block style %}{% endblock %}
{% endcompress %}

{# The stylevars block is the only place you're allowed to use Django context vars, because it is uncompressed #}
{% block stylevars %}{% endblock %}

{# The scriptvars block is the only place you're allowed to use Django context vars, because it is uncompressed #}
{% block scriptvars %}{% endblock %}

{# Scripts are compressed with django-compressor #}
{% block section-script %}
{% compress js %}
    <script type="text/javascript" src="{% static 'global/es5-shim.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'global/es5-sham.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'global/es6-shim.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'global/es6-sham.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'global/html5shiv-printshiv.min.js' %}"></script>
{% endcompress %}
<!--[if lt IE 9 ]>
{% compress js %}
    <script type="text/javascript" src="{% static 'global/jquery-1.12.4.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'global/bootstrap-ie8-4.1.1/js/bootstrap-ie8.js' %}"></script>
    <script type="text/javascript" src="{% static 'global/bootstrap-4.1.1/js/bootstrap.js' %}"></script>
{% endcompress %}
<![endif]-->
<!--[if gte IE 9]><!-->
{% compress js %}
    <script type="text/javascript" src="{% static 'global/jquery-3.3.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'global/popper-1.14.3.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'global/bootstrap-4.1.1/js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'global/fontawesome-5.0.13/fontawesome-all.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'global/html2canvas.js' %}"></script>
{% endcompress %}

Answer 1

you're probably having dynamic parts in your css files. at a first glance, the if newdesign seems like it could be a problem.

django-compressor cannot know what values newdesign will have at runtime, and therefore it cannot know what these dynamic parts will actually look like. check out the COMPRESS_OFFLINE_CONTEXT, it might help.