时间戳

首页 > 解决方案 > 车把未加载本地 css 文件

node.js - 车把未加载本地 css 文件

问题描述

我在 express js 应用程序中使用手柄版本 4.4.3 来呈现 html。我正在尝试在样式标签中加载引导 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")));

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

在此处输入图像描述

标签： node.jsexpresshandlebars.js

解决方案

嘿，这是我解决这个问题的方法：

首先，我建议您尝试使用 express-hanldebars，它是一个专门为 express 和车把交互构建的模块。

基本上你需要在洞文件夹上使用 app.use

我的结构

应用程序.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);

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

布局.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>

我希望我能给你一个提示随时询问是否有任何不清楚的地方

编辑：我会试试这个，我的猜测是快递看不到资产文件夹：

app.use(express.static(path.join(__dirname,'..','assets'));

然后为您的html：

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

推荐阅读