Css 文件未在 ejs 中加载
[英]Css file not loading in ejs
问题描述
Issue - I cannot figure out why the CSS file is not loading in ejs.There is no error message given by the terminal.
问题 - 我无法弄清楚为什么 CSS 文件没有在 ejs 中加载。终端没有给出错误消息。 Its showing message -GET /assets/css/style.css 404 159 - 0.674 ms.The server (localhost is running perfectly).它的显示消息 -GET /assets/css/style.css 404 159 - 0.674 毫秒。服务器（本地主机运行良好）。
What I tried:app.use(express.static(__dirname + '/assets/css'));This also gives the same message.I even tried to change the file paths and tried other methods to do so but nothing works.我尝试了什么：app.use(express.static(__dirname + '/assets/css')); 这也给出了相同的消息。我什至尝试更改文件路径并尝试了其他方法，但没有任何效果。
My ejs code -我的 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 File _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
1 个解决方案
解决方案1
1 已采纳 2021-05-13 17:55:31
app.use is used to to add golbal middlewares to your routes. app.use用于将 gobal 中间件添加到您的路由中。
The basic syntax goes like:-基本语法如下：-
app.use('/someRoute', middleware);
Instead of...代替...
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"));
Try...尝试...
app.use(express.static(path.join(__dirname, "assets")));
This will serve your whole assets folder on the web.这将为 web 上的整个assets文件夹提供服务。
The above line of code will serve your assets folder along with ALL its contents onto the web for every route your server has and will have in future.上面的代码行将为您的服务器拥有和将来拥有的每条路由提供您的assets文件夹及其所有内容到 web。
Since now the assets folder is already served up, you do not actually need to add assets to your href inside your <link> tag.由于现在assets文件夹已经提供，您实际上不需要将assets添加到<link>标记内的href中。
The path to your css file is assets/css/styles.css . css 文件的路径是assets/css/styles.css 。
Earlier, you server was looking for assets/assets/css/styles.css since assets is already served up.早些时候，您的服务器正在寻找assets/assets/css/styles.css ，因为assets已经提供。
Inside your _header.ejs file change the href of your link to:-在您的_header.ejs文件中，将链接的href更改为：-
<link rel="stylesheet" type="text/css" href ="/css/style.css">
Now the server will look for assets/css/styles.css which exists so there is no error now.现在服务器会寻找assets/css/styles.css存在所以现在没有错误。
I hope this helps.我希望这有帮助。
I don't understand what you were trying to do with this...我不明白你想用这个做什么......
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")));
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.