css文件未在ejs中加载答案

【问题标题】：Css file not loading in ejscss文件未在ejs中加载
【发布时间】：2021-05-13 17:42:09
【问题描述】：

问题 - 我无法弄清楚为什么 CSS 文件没有在 ejs 中加载。终端没有给出错误消息。它的显示消息 -GET /assets/css/style.css 404 159 - 0.674 ms.服务器（本地主机运行良好）。

我尝试了什么：app.use(express.static(__dirname + '/assets/css'));这也给出了相同的消息。我什至尝试更改文件路径并尝试了其他方法但没有有效。

我的 ejs 代码 -

const express = require('express');
const dotenv = require('dotenv');
const app = express();
const morgan =require('morgan');
const path = require('path');
dotenv.config({path:'./config.env'});
const PORT = process.env.PORT ||8080


// parse request to body-parser

app.use(express.urlencoded({ extended: true }));

app.use(express.json());

// log request 
app.use(morgan('tiny'));

// set view engine 
app.set("view engine","ejs");
app.set("views",path.join(__dirname,"views"))
//load assets


app.use('./css',express.static(path.resolve(__dirname,"assets/css")));

//css/style.css
app.use('/img',express.static(path.resolve(__dirname,"assets/img")));
app.use('/js',express.static(path.resolve(__dirname,"assets/js")));
app.use(express.static("assets"));

app.get('/', (req,res)=>{

    res.render('index');
    
});

app.listen(PORT,()=>{console.log('Server is running Sucessfully ');});

_header.ejs 文件

<html>
    <head>
        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous"/>
    
        <link rel="stylesheet" type="text/css" href ="/assets/css/style.css">
</head>
    <body>
 <!----HEader-->
    <header id="header">
<nav>
    <div class ="text-center">
      <a href ="/" class ="nav-brand text-dark">User Management System</a>
    </div>
</nav>

    </header>

File structure
-assets

--css

---style.css

【问题讨论】：

标签： css node.js ejs

【解决方案1】：

app.use 用于将全局中间件添加到您的路由中。

基本语法如下：-

app.use('/someRoute', middleware);

而不是...

app.use('./css',express.static(path.resolve(__dirname,"assets/css")));

//css/style.css
app.use('/img',express.static(path.resolve(__dirname,"assets/img")));
app.use('/js',express.static(path.resolve(__dirname,"assets/js")));
app.use(express.static("assets"));

试试...

app.use(express.static(path.join(__dirname, "assets")));

这将为您在网络上的整个 assets 文件夹提供服务。

上面的代码行会将您的assets 文件夹连同其所有内容提供到网络上，用于您的服务器拥有和将来拥有的每条路线。

由于现在assets 文件夹已经提供，您实际上不需要将assets 添加到您的href 中的<link> 标记内。

你的css文件的路径是assets/css/styles.css。

之前，您的服务器一直在寻找 assets/assets/css/styles.css，因为 assets 已经提供了服务。

在您的_header.ejs 文件中，将链接的href 更改为：-

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

现在服务器将寻找存在的assets/css/styles.css，因此现在没有错误。

我希望这会有所帮助。

我不明白你想用这个做什么......

app.use('./css',express.static(path.resolve(__dirname,"assets/css")));
app.use('/img',express.static(path.resolve(__dirname,"assets/img")));
app.use('/js',express.static(path.resolve(__dirname,"assets/js")));

【讨论】：

没有变化仍然给出相同的消息--“GET /assets/css/style.css 404 159 - 1.721 ms”......
我已经编辑了我的答案。您的 href 属性设置不正确。由于现在资产文件夹在服务器上提供，因此您无需将其添加到您的路径中。
感谢现在它的工作，你能告诉为什么以前的href是错误的吗？？
我会在我的答案中添加一个解释。您可以从那里阅读。