由于某种原因，CSS 不会加载到 hbs 文件中答案

【问题标题】：CSS won't load in hbs file for some reason由于某种原因，CSS 不会加载到 hbs 文件中
【发布时间】：2022-04-23 02:14:19
【问题描述】：

所以我有一个非常基本的文件结构，但是无论出于何种原因，当我在 localhost 上运行它时，我无法让 css 显示在项目中。除了 css 加载之外的所有其他内容都是结构

enter image description here

我尝试了各种路径文件，只是直接将整个文件路径复制到相关部分，但仍然不起作用。我正在调用 index.js 文件中的所有内容。

这是代码

const path = require('path');
const express = require('express');
const hbs = require('hbs')
const app = express();
const config = require('./config/request');


const publicDirectoryPath = path.join(__dirname, 'public')
// it was ../public but that did nothing
// also ./public/
// also ../public/
// also /public/
// also public/

const viewsPath = path.join(__dirname, './templates/views')
const partialsPath = path.join(__dirname, './templates/partials')

// error handler
app.use(function(req, res, next) {
    if(config.MARKETPLACE_ID === '' || config.SECRET === '') {
        res.send('MarketplaceId and secret must be set with your marketplace API credentials');
    } else{
        next();
    }
});

app.set('view engine', 'hbs')
app.set('views', viewsPath)
hbs.registerPartials(partialsPath)

app.use(express.static(publicDirectoryPath))

app.get('', (req, res) => {
    res.render('index')
})

app.listen(process.env.PORT || 3000, function(err, req, res) {
    if(err) {
        res.send('There was no endpoint listening');
    } else{
        console.log('server started on port: ', (process.env.PORT || 3000));
    }
});

css 文件（它非常、非常复杂，所以请花点时间阅读它）

.main-content {
    background-color: purple;
}

index.hbs 文件

<!DOCTYPE html>

<html>

<head>
    <title>marketplace</title>
    <link rel="stylesheet" src="/literally/the/file/path/I copied/from visual studio code/public/css/styles.css" >
 I even put the file into the terminal to get the exact address cause I was convinced I was spelling something wrong
 unless all the possible tools used to determine file path on my Mac are wrong then this is the correct file path. 
</head>

<body>
  <div class="main-content">

是的。 index.hbs 页面应该有紫色背景。它曾经说过加载 css 文件时出现错误，原因是 MIME 类型或其他原因，但我基本上已经玩过它并让它消失了。现在没有背景。没有加载css。控制台中没有关于错误或文件未加载的任何内容。那是什么？

有一次我尝试将所有这些都加载到我的 css 中

<link rel="stylesheet" type="text/css" src="actual path copied from the terminal the path is 100% correct>
<link rel="stylesheet type="text/css" href="100% correct file path">

【问题讨论】：

我当然希望你的第二个link 标签以> 结尾，因为它不在这里。这可能会导致一切“不起作用”。
@BobRodes 不，那只是在堆栈溢出帖子中。 CSS 仍然没有加载

标签： html css node.js express handlebars.js

【解决方案1】：

我有同样的问题，所以解决它你应该只在链接 src 中输入“/css/styles.css”。

<link rel="stylesheet" href="/css/style.css">

我希望它也对你有用。

【讨论】：