添加css来表达项目和ejs

Question

我在 node/express/ejs 中构建一个项目，并努力将 css 链接到 ejs 文件并让 css 显示在浏览器中。我创建了一个公用文件夹，其中包含一个 css 文件夹和 main.css 文件。我已经阅读了教程来检查如何做到这一点，但只是没有看到如何解决这个问题并让 cssto 出现。非常感谢任何可以提供帮助的人:)

这是我的带有 app.use 的 app.js 文件

const express = require('express');
const expressLayouts = require('express-ejs-layouts');
const mongoose = require('mongoose');
const passport = require('passport');
const flash = require('connect-flash');
const session = require('express-session');
const path = require('path');

const app = express();

// Passport Config
require('./config/passport')(passport);

// DB Config
const db = require('./config/keys').mongoURI;

// Connect to MongoDB
mongoose
  .connect(
    db,
    { useNewUrlParser: true ,useUnifiedTopology: true}
  )
  .then(() => console.log('MongoDB Connected'))
  .catch(err => console.log(err));

// EJS
app.use(expressLayouts);
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use('/css', express.static(__dirname + 'public/css'))


// Express body parser
app.use(express.urlencoded({ extended: true }));

// Express session
app.use(
  session({
    secret: 'secret',
    resave: true,
    saveUninitialized: true
  })
);

// Passport middleware
app.use(passport.initialize());
app.use(passport.session());

// Connect flash
app.use(flash());

// Global variables
app.use(function(req, res, next) {
  res.locals.success_msg = req.flash('success_msg');
  res.locals.error_msg = req.flash('error_msg');
  res.locals.error = req.flash('error');
  next();
});

// Routes
app.use('/', require('./routes/index.js'));
app.use('/users', require('./routes/users.js'));
app.use(express.static(__dirname + '/public/styles/main.css'));

const PORT = process.env.PORT || 5000;

app.listen(PORT, console.log(`Server started on port ${PORT}`));

这是ejs文件

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <script src="https://kit.fontawesome.com/4ab1675432.js" crossorigin="anonymous"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>TBANK</title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <header>
          <div class="logo">
              <h1 class="logo-text"><span>T</span>BANK</h1>
          </div>
          <ul class="nav">
              <li><a href="#">Savings</a></li>
              <li><a href="#">Borrowing</a></li>
              <li><a href="#">Features</a></li>
              <li><a href="#">Sign Up</a></li>
          </ul>
      </header>
      <div class="main-body">
        <div class="home-heading">
          <h1 class="home-header">Bank with the future</h1> 
        </div>
        <!--<div class="container"><%- body %></div>-->

<div class="footer-container">
    <footer class="footer_area">
      <div class="row">
        <div class="column">
          <span>T</span>BANK
        </div>
        <div class="column">
          <ul class="list-style-company">
            <li><a href="#">About us</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Press</a></li>
            <li><a href="#">FAQS</a></li>
            <li><a href="#">Terms & Conditions</a></li>
          </ul>
        </div>
        <div class="column">
          <ul class="list-style-company">
            <li><a href="#">Community</a></li>
            <li><a href="#">Transparency</a></li>
            <li><a href="#">How money works</a></li>
            <li><a href="#">How we protect you</a></li>
            <li><a href="#">Business Accounts</a></li>
          </ul>
        </div>
        <div class="column">
          <div class="f_social_icon">
            <a href="#" class="fab fa-facebook"></a>
            <a href="#" class="fab fa-twitter"></a>
            <a href="#" class="fab fa-instagram"></a>
          </div>
        </div>
        </div>
      </div>
    </footer>
    </body>
</html>

Answer 1

第一步是验证您的 CSS 是否在您期望的网址上提供。 转到您的浏览器并检查您的 css 是否在 url http://localhost:8080/css/main.css 上正确提供

如果是这样，则意味着您的 HTML 中的 css 路径不正确。如果它没有被正确提供，那么它要么没有正确配置，要么位于不同的 url。

我怀疑您的网址css/main.css（相对于当前页面网址的网址）应该是/css/main.css（相对于您的应用程序的根目录）。