Question

我有一个用于Ajax的加载面板，我试图显示它。我从其他项目中获取了代码，但它使用了LESS，Bootstrap 3和FontAwesome 4.我试图将它应用于Bootstrap 4，SASS和FontAwesome 5。

对不是我只是希望它显示，所以我可以验证它的外观和它是否正常工作，然后我将通过Ajax调用将其隐藏起来隐藏它。页面上显示的内容只是单词＆＃34;处理，请稍候......＆＃34;在标准字体中一直到左边告诉我CSS没有被应用。当我检查说＆＃34; ajax-loading-panel＆＃34;在开发工具中，我没有看到应该在该元素上应用的任何样式。

我一直在努力了解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;
}

Ajax加载面板不显示？

0 个答案: