EJS无法在某些页面上加载CSS

时间:2019-02-27 15:01:13

标签: html css node.js ejs

昨天,我遇到了一个非常奇怪的问题-EJS无法仅在特定页面中加载样式,这很奇怪。一切都在其他页面上进行...我正在正确加载所有内容,并且样式也未加载。而且,我得到一个随机错误(Cannot read property name of undefined [我确定名称存在,我已经console.log记录它,看是否缺少名称,但是没有。]),但是EJS正确显示了该名称,不确定错误在哪里,但是...这很奇怪。这是我第一次使用EJS,在此之前一切都非常完美。我正在使用ejs包(最新版本)和express(也最新版本)。

guildPage.ejs

<!DOCTYPE html>
<html>
  <head>
    <title>uwu</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <%- include('navbar',  { user: user, guilds: user.guilds, guildAtual: guildAtual, dashboard: true }) %>
    <h1>
      oWo
    </h1>
  </body>
</html>

main.css

/* css do site */
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans');
@import url('https://w3schools.com/w3css/4/w3.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 17px;
  background-color: #181818;
}
a {
  text-decoration: none;
}
.roundImage {
  border-radius: 50%;
  width: 26px;
  height: 26px;
}

.w3-theme-l5 {color:#000 !important; background-color:#f1f1f1 !important}
.w3-theme-l4 {color:#000 !important; background-color:#d1d1d1 !important}
.w3-theme-l3 {color:#fff !important; background-color:#a2a2a2 !important}
.w3-theme-l2 {color:#fff !important; background-color:#747474 !important}
.w3-theme-l1 {color:#fff !important; background-color:#454545 !important}
.w3-theme-d1 {color:#fff !important; background-color:#151515 !important}
.w3-theme-d2 {color:#fff !important; background-color:#121212 !important}
.w3-theme-d3 {color:#fff !important; background-color:#101010 !important}
.w3-theme-d4 {color:#fff !important; background-color:#0e0e0e !important}
.w3-theme-d5 {color:#fff !important; background-color:#0b0b0b !important}

.w3-theme-light {color:#000 !important; background-color:#f1f1f1 !important}
.w3-theme-dark {color:#fff !important; background-color:#0b0b0b !important}
.w3-theme-action {color:#fff !important; background-color:#0b0b0b !important}

.w3-theme {color:#fff !important; background-color:#181818 !important}
.w3-text-theme {color:#181818 !important}
.w3-border-theme {border-color:#181818 !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#181818 !important}
.w3-hover-text-theme:hover {color:#181818 !important}
.w3-hover-border-theme:hover {border-color:#181818 !important}

/* Campo hover botão nome */
.w3-button:hover { color: #f3052f !important; background-color: #f3052f4d !important; }

/* Campo botão nome */
.w3-btn, .w3-button { border: 2px solid; border-color: #f3052f; border-radius: 10px; }
.w3-red, .w3-hover-red:hover { background-color: #ffffff !important} 
.w3-border { border: 1px solid #f44336 !important; }

.w3-red, .w3-hover-red:hover { color: #fff !important; background-color: #1a1a1a !important; }

navbar.ejs

<!DOCTYPE html>
<html>
  <head>
    <title>Site</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <noscript>Ative o JavaScript.</noscript>
    <div class="w3-bar w3-theme">
      <span class="w3-bar-item">owo</span>
      <a href="/" class="w3-bar-item w3-button w3-red">Home</a>
      <% if (user) { %>
        <% if (dashboard) { %>
          <div class="w3-mobile w3-dropdown-hover w3-right">
            <button style="height:45px;" class="w3-button w3-red w3-border w3-border-grey">
              <% if (guildAtual) { %>
                <img class="roundImage" src="<%= guildAtual.iconURL %>" /> <%= guildAtual.name %>
              <% } else { %>
                Selecione uma guild...
              <% } %>
            </button>
            <div class="w3-dropdown-content w3-bar-block w3-red">
              <% guilds.forEach((guild, index) => { %>
                <% if (index + 1 == guilds.length) { %>
                  <a class="w3-bar-item w3-red" href="/dashboard/guild/<%= guild.id %>"><img class="roundImage" src="<%= guild.iconURL %>" /> <%= guild.name %></a>
                <% } else { %>
                  <a class="w3-bar-item w3-red w3-border-bottom w3-border-grey" href="/dashboard/guild/<%= guild.id %>"><img class="roundImage" src="<%= guild.iconURL %>" /> <%= guild.name %></a>
                <% } %>
              <% }) %>
            </div>
          </div>
        <% } %>
        <div class="w3-dropdown-hover w3-mobile w3-right">
          <button style="height:45px;" class="w3-button w3-border w3-red-border"><img class="roundImage" src="<%= user.avatarURL %>" /> <%= user.username %><i class="fa fa-carret-down"></i></button>
          <div class="w3-dropdown-content w3-bar-block w3-red">
            <a href="/dashboard" class="w3-bar-item w3-black w3-border-bottom">Dashboard</a>
            <a href="/auth/logout" class="w3-bar-item w3-black">Logout</a>
          </div>
        </div>
      <% } else { %>
        <a class="w3-bar-item w3-right w3-red" href="/auth/login">Login</a>
      <% } %>
    </div>
  </body>
</html>```

0 个答案:

没有答案