Css 文件未在 ejs 中加载

Question

问题 - 我无法弄清楚为什么 CSS 文件没有加载到 ejs.There 是终端没有给出错误消息。它显示消息 -GET /assets/css/style.css 404 159 - 0.674 ms.The server (localhost is 运行 perfectly).

What I tried :app.use(express.static(__dirname + '/assets/css'));这也给出了相同的 message.I 甚至试图更改文件路径并尝试了其他方法，但没有任何效果。

我的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

Answer 1

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

基本语法如下：-

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 添加到 <link> 标签内的 href。

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

早些时候，您的服务器正在寻找 assets/assets/css/styles.css，因为 assets 已经提供。

在您的 _header.ejs 文件中，将 link 的 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")));

Css 文件未在 ejs 中加载

Css file not loading in ejs

css

ejs

node.js