昨天,我遇到了一个非常奇怪的问题-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>```