把手未加载本地CSS文件

问题描述 投票:0回答:1

我正在Express js应用程序中使用4.4.3版把手来呈现html。我正在尝试在样式标签中加载Bootstrap CSS。使用cdn链接时,它工作正常。但是我想从本地路径加载。如果我正在使用本地路径,则不会加载。我不知道为什么它不起作用。我尝试了多种加载本地CSS文件的方法。但是我的运气不好。任何人都可以建议我如何在车把中使用本地CSS文件。下面我提到了我尝试过的所有代码。

<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="./css/bootstrap.min.css" type="text/css"> 
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="./assets/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css">

这些我在registration_print.html文件中尝试过的事情。而且在我的express.js文件中,我提到了静态路径。

app.use(express.static(__dirname + '/../assets/templates'));
app.use("/assets", express.static(path.join(__dirname, "/../assets")));

下面是我的文件夹结构。请任何人帮助我解决此问题。

enter image description here

node.js express handlebars.js
1个回答
0
投票

嘿,这是我的解决方法:

首先,我会建议您,尝试使用express-hanldebars它的一个模块,该模块专门用于express和handlebars交互。

基本上,您需要在小孔文件夹上使用app.use

My structure

app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var hbs = require('express-handlebars');
var handlebars = require('./helpers/handlebars.js')(hbs);

var routes = require('./routes/index');

var app = express();

// view engine setup
// Settings for Handlebars moved to ./helpers/handlebars.js
app.engine('hbs', handlebars.engine);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);

这是我在模板中使用它们的方式。

layout.hbs

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <link rel="stylesheet" href="/stylesheets/navigation.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.18.0/css/mdb.min.css" rel="stylesheet">

<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.18.0/js/mdb.min.js"></script>
<!-- Custom JavaScript -->
<script type="text/javascript" src="/javascript/custom-script.js"></script>
<script type="text/javascript" src="/javascript/navigation.js"></script>
</head>
<body>
    {{{ body }}}
</body>
</html>

希望我可以给您一个提示,随时询问是否不清楚

© www.soinside.com 2019 - 2024. All rights reserved.