css 文件未加载 express-handlebars

Question

我在使用 express-handlebars 进行 CSS 访问时遇到了问题。我看不到问题，我想得到你的帮助。

这是我的工作区： Workspace/Meus Arquivos

在我的home.handlebars中：<link rel="stylesheet" href= "css/home.css">

在我的home.css中：

footer{ background-color: blue; }

它没有像我要求的那样显示蓝色背景，而是什么也没显示：

页脚代码：

    <footer>
    <font size = 4>
        <h5>© 2019 Suplementos Atlética</h5>
    </font>
</footer>

Footer/Rodapé

Answer 1

在快递中，您必须设置快递静态。它看起来像下面的代码：

app.use(express.static('public'));

现在，您可以在根应用程序中创建一个 public 文件夹，在 public 文件夹中创建一个 css 文件夹，然后将您的样式放入其中。

因此，您的目录如下所示：

源码
public > css > home.css
观看次数

如何使用？你可以这样称呼你的link：

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

例如，您可以在此处查看我的示例项目：https://codesandbox.io/s/elegant-fog-1n61o

希望对您有所帮助

Answer 2

创建一个名为 "public" 的基本文件夹，然后创建一个 "css" 文件夹，其中包含您想要的 css 个文件

另外，在您的 index.js 中确保您拥有以下内容：

    var app = express();
    //serve up your main public folder
    app.use('/', express.static(path.join(__dirname, '../public')));`
    //set the layout engine your using
     app.engine('handlebars', exphbs());
     app.set('view engine', 'handlebars');
     app.get('/', function (req, res) {
     // would render your home.handlebars page
         res.render('home');
     });

您的 public 文件夹应该有 css/home.css 并且它应该呈现在您创建的主页中

css 文件未加载 express-handlebars

css files not load express-handlebars

css

workspace

reference

express

handlebars.js