CSS 不适用于 ejs 文件答案

【问题标题】：CSS wont apply to ejs filesCSS 不适用于 ejs 文件
【发布时间】：2019-11-10 06:06:00
【问题描述】：

我的 CSS 代码不适用于 ejs 文件。但由于某种原因，它适用于所有其他 ejs 文件。我的应用程序结构是... （使用 nodejs 和 express）

app.js
util
routes
controllers
models
public
 -css
   -main css, etc
   -admin css folder
     -admin-page1 css
     -admin-page2 css 
views
  - includes (contains header/end.ejs)
  - admin folder 
    - admin-page1 ejs
    - and so on..

在 app.js 中，我有：
app.use(express.static(path.join(__dirname,"public")));

在我的 ejs 文件中，我确实包含了我的 ejs 头文件。

包含文件夹中的我的头 ejs 文件包含所有 CSS 文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%=pageTitle%></title>  
<link rel = "stylesheet" type = "text/css" href = "css/main.css" />
<link rel = "stylesheet" type = "text/css" href = "css/bio.css" />  
<link rel = "stylesheet" type = "text/css" href = "css/admin/admin_request-list.css" />  
<link rel = "stylesheet" type = "text/css" href = "css/amin/admin_single-request.css" />  
<link rel = "stylesheet" type = "text/css" href = "css/quote_form.css" /> 
<link rel = "stylesheet" type = "text/css" href = "css/hp-services.css" />

我尝试了所有方法，就像我说它不适用于一个管理员 ejs 文件，但我从一个 ejs 文件中复制了代码并粘贴到这个文件中，看看我是否犯了一些错误，但它仍然不起作用。

任何帮助将不胜感激！我只是想克服这个烦人的步骤

【问题讨论】：

您访问的网址是什么？检查 css 文件是否存在于网络调用和页面源中。
您应该使用以/ 开头的绝对路径，例如/css/main.css，否则如果您在页面上，假设example.com/admin 链接css/main.css 指向example.com/admin/css/main.css。顺便说一句，如果您检查 devtools，您应该会看到类似 Failed to load resource: the server responded with a status of 404 () 的错误

标签： css node.js ejs

【解决方案1】：

你只需要去掉 type="text/css"。比如这个链接：

<link rel = "stylesheet" type = "text/css" href = "css/main.css" />

我们改成这个：

<link rel = "stylesheet" href = "css/main.css" />.

【讨论】：

不带 type="text/css"

【解决方案2】：

在主 CSS 文件上使用 Imoport 文件的最佳解决方案

        @import url("bio.css");
        @import url("quote_form.css");
        @import url("hp-services.css");

        @import url("admin/admin_request-list.css");
        @import url("admin/admin_single-request.css");

【讨论】：

这是做什么的？它如何回答这个问题？不要只是脱口而出代码。解释你自己！ stackoverflow.com/help/how-to-answer
从您的头 ejs 文件中删除所有样式表链接，只保留 main.css 链接。然后在 main.css 的最顶部插入导入代码。