Панель загрузки Ajax не отображается?

У меня есть панель загрузки для Ajax, которую я пытаюсь отобразить. Я взял код из другого проекта, в котором это работает, но он использует LESS, Bootstrap 3 и FontAwesome 4. Проект, к которому я пытаюсь применить его, - это Bootstrap 4, SASS и FontAwesome 5.

Правильно, не я просто хочу, чтобы он отображался, чтобы я мог проверить, как он выглядит и работает правильно, а затем я скрою его, подключив его с помощью вызова Ajax. На странице отображаются только слова «Обработка, пожалуйста, подождите ...» стандартным шрифтом до конца слева, что говорит мне, что CSS не применяется. Когда я проверяю, скажем, строку «ajax-loading-panel» в инструментах разработчика, я не вижу ни одного из стилей, которые следует применить к этому элементу.

Я изо всех сил пытался понять, как работает специфика SASS и порядок, в котором мне нужно поместить мой CSS в файлы SASS. У меня такое ощущение, что это часть проблемы.

Это HTML и CSS. Сначала я поместил CSS в свой файл site.scss, но также попытался поместить его в файл _theme.scss, думая, что он не улавливает его в site.scss. Я подтвердил, что CSS записывается в мой файл site.css, который скомпилирован, поэтому я думаю, что он доступен.

HTML

<div id = "divLoading" class = "ajax-loading-wrapper">
    <div class = "ajax-loading-div">
        <span class = "ajax-loading-text">
            Processing, please wait...
        </span>
        <span class = "ajax-loading-icon fas fa-spinner fa-pulse fa-3x"></span>
    </div>
</div>

CSS (и я вижу это, когда смотрю на скомпилированный файл .css)

/*==============  AJAX LOADING PANEL  =====================*/
.ajax-loading-wrapper  {
    position: fixed;
    margin: 0px;
    padding: 0px;
    right: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #666;
    z-index: 30001;
    filter:  opacity(0.85);
}

.ajax-loading-div  {
    position: fixed;
    top: 40%;
    left: 50%;
    height: 7em;
    padding-top: 2.3em;
    width: 20em;
    margin-left: -10em;
    padding-left: 2.1em;
    background-color: black;
    color: white;
    border-radius: 5px;
}

.ajax-loading-text  {
    position: absolute;
    top: 15%;
    left: 20%;
    color: white;
}

.ajax-loading-icon  {
    position: absolute;
    top: 45%;
    left: 39%;
    color: white;
}

Это мой файл site.scss.

   @import "scss/_custom-variables.scss";
    @import "bootstrap/bootstrap.scss";
    @import "scss/_theme.scss";

/*==============  AJAX LOADING PANEL  =====================*/
.ajax-loading-wrapper  {
    position: fixed;
    margin: 0px;
    padding: 0px;
    right: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #666;
    z-index: 30001;
    filter:  opacity(0.85);
}

.ajax-loading-div  {
    position: fixed;
    top: 40%;
    left: 50%;
    height: 7em;
    padding-top: 2.3em;
    width: 20em;
    margin-left: -10em;
    padding-left: 2.1em;
    background-color: black;
    color: white;
    border-radius: 5px;
}

.ajax-loading-text  {
    position: absolute;
    top: 15%;
    left: 20%;
    color: white;
}

.ajax-loading-icon  {
    position: absolute;
    top: 45%;
    left: 39%;
    color: white;
}