Not reading the CSS - Express ejs layouts
Question
I am using the express ejs layouts but only the mainPage can read the css the other pages don't read it (the css, the html read it).
Another question, if I wanted to use another layout (ex: layout2.ejs) what would i do to act on a specific page.
Tree:
Project
- public
- js
- css
- style.css
- routes
- index.js
- users.js
- views
- layout.ejs
- mainPage.ejs
- login.ejs
...
- app.js
I am using particles.js if you need to know.
app.js
const express = require('express');
const expL = require('express-ejs-layouts');
const app = express(); //Create a Web Application
//EJS
app.use(expL);
app.set('view engine', 'ejs')
//Routes
app.use('/', require('./routes/index'));
app.use('/users', require('./routes/users'));
app.listen(3000, ()=> console.log('Listening at 3000'));
app.use(express.static('public'))
index.js
const express = require('express');
const router = express.Router();
router.get('/',(req, res) => {
res.render('mainPage',{title: 'Groupy'}); (THIS ONE WORK AND READ THE CSS)
});
module.exports = router;
users.js
const express = require('express');
const router = express.Router();
//Login Page
router.get('/login',function(req, res) {
res.render('login',{title: 'Groupy Login'}); (DON'T READ CSS)
});
//Register Page
router.get('/register',function(req, res) {
res.render('register',{title: 'Groupy Register'}); (DON'T READ CSS)
});
module.exports = router;
layout.ejs
<html>
<head>
<script type="text/javascript" src="code.js"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
</script>
<title><%= title %></title>
</head>
<body>
<div id="particles-js"> </div>
<script src="js/particles.min.js"></script>
<script src="js/app.js"></script>
<h2>teste</h2>
<%- body %>
</body>
mainPage.ejs
<h1 id="title">Groupy</h1>
<div id="firstBox">
<div id="SignIn"><a href="/users/register">Register </a><div id="login"><a href="/users/login">Login</a></div>
</div>
</div>
<br>
<div id="mainBox"></div>
login.ejs
<h1 id="title">Groupy Login</h1>
Reseult of login (without CSS):
teste
Groupy Login
2 answers
solution1
0 2020-05-29 21:15:15
Can you try the following app.use instead of app.use(express.static('public'))
app.use('/public', express.static(path.join(__dirname, 'public')));
Also you should import path module
const path = require('path');
solution2
0 ACCPTED 2020-06-09 23:14:16
The error was the path of css and javascript (particles.js)
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script src="/js/particles.min.js"></script>
<script src="/js/app.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.