Ejs 不渲染 css 文件

Question

我正在使用 Nodejs 开发 CRUD 应用程序，但在从项目目录渲染外部 css 和 bootstrap5 时遇到问题。当我尝试使用 post Id 传递 get 时，仅呈现 html 块。当我使用 CDN 时它可以工作。 。 app.get('edit'){..} 有效，但当 app.get('/edit/:id'){..} 不渲染样式时

// this one works, rendering html and styling 

// admin fetch all posts
  app.get('/admin', (req,res) => {

    con.query(
        'SELECT * FROM post',
        (error, results) => {
            res.render('./admin/adminland', {post: results, layout:'./layout/dashboard'});
            
        }
    );

  }) ;
  
  // It still loads the page but it deosnot render the css.
  
  
  // edit post
  app.get('/edit/:id', (req,res) => {
    
    con.query(
        'SELECT * FROM post WHERE postid = ?',
        [req.params.id],
        (error, results) => {
            res.render('admin/post/editpost', {post: results[0], verified: req.session.loggedin});
        }
    );

    
  }) ;
  

Answer 1

我已经使用了

express.static()

..它适用于其他页面。问题是当我使用内联样式或来自 editpost 页面上的 CDN 时，它工作正常，但当传递 edit/:id 时，样式不起作用。如果 :id 部分被删除，它会再次工作。

这听起来很可能是因为您在页面中使用了错误的 URL 来引用样式表。我的猜测是您没有以

/

开头 URL，因此它会被视为相对 URL，因此一旦您将其放入不是顶级路径的页面中，它就会停止工作，因为浏览器添加了页面的路径到 URL 的开头，这是错误的 URL。

将

/

添加到网页中样式表 URL 的开头，以便浏览器在请求之前不会将页面的路径添加到 URL 的开头。

此外，如果您查看浏览器控制台，它可能会向您显示它尝试获取的实际 URL，并收到 404。

Answer 2

我遇到了问题并得到了解决方案，但我不知道为什么会这样

问题不在 app.js 中，而是在布局文件或 .ejs 文件中

您可能已将样式包含为

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

只需在 href 之前添加“/”即可，

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

这将使CSS工作

express.use(express.static("public"))

将创建一个可以使用的静态目录，它将以如下方式访问

(__dirname + 'public') + <href>
i.e., (__dirname + 'public') + '/css/styles.css'
result => '/home/usr/username/project/public/css/styles.css'
without '/' it will be like => '/home/usr/username/project/publiccss/styles.css'

这就是它的考虑方式，但这也使一个事实无效，即其他不使用 :id 的 .ejs 文件将与 css 一起正常工作 -> 可能还有其他一些原因...希望它有所帮助，如果您找到实际的有问题请评论