Question

我希望有人可以给我一个提示。我想将一个文件中的内容导入到我的手柄文件中。可能吗？在我的例子中，它是一个css / scss文件（例如reset.css），我想将其导入我的手柄文件（styleReset.hbs）。

＆＃34; styleReset.hbs＆＃34;应该看起来像这样：

<style type="text/css">
    <!-- import of reset.css content -->
</style>

P.S。我不想使用-tag

Answer 1

您无法导入带有把手的文件，只能导入部分文件。你可以预先编译你的reset.css，好像它是一个部分把手，并包含{{> filename}}。

在不知道您的构建设置的情况下，我认为我不能详细介绍。

http://handlebarsjs.com/precompilation.html

（我个人会将sass to import my reset.css用于我在页面中包含的一些主样式表。）

Answer 2

是的，可以将外部css文件导入到手柄.hbs文件中（即模板引擎）。
请按以下步骤操作：

首先创建一个公共文件夹，在其下放置您的CSS 文件夹，其中包含所有css文件。对于ex文件夹结构将是 - public / css / style.css（注意：此公用文件夹包含所有静态文件，如css，图像等）
通过app.use(express.static(__dirname + '/public'));
现在您可以在handlerbars模板文件中导入外部css文件 <link rel="stylesheet" href="../css/style.css">

Answer 3

也可能有一个“主”布局，其中可以包含页眉和页脚。

app.engine('.hbs', exphbs({
  extname: '.hbs',
  defaultLayout: 'main'
}))
app.set('view engine', '.hbs')

此外，如果您使用的是模块“ express-handlebars”（而非“ hbs”）。您也可以设置扩展名。

Answer 4

将静态目录设置为文件夹，您可以在其中保存所有资源（例如css，js）和其他如下所示的资源。

const app = express();
app.use(__dirname + '/public');

在这里，我按照常规使用了app.js目录中的公用文件夹。在公用文件夹中，您可以拥有名为css / bootstrap.css

的子文件夹。

现在在车把页面中，像平常一样添加链接。

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

Answer 5

1）为了在把手中使用.css文件，应在下面显示的app.js / server.js文件中注册该文件。

app.use("/bootstrap",express.static(__dirname+"/node_modules/bootstrap/dist"))

2）按照给定的波纹管图像将文件导入到您的车把文件中（适用于主布局和子布局）。

i）在主布局文件中

ii）在子布局中

Answer 6

index.js 
public:
   style.css
views:
   index.hbs

Inside index.js
   var express=require('express');
   var app=express(); 
   var hbs = require('hbs');
   app.set('view engine', 'hbs');
   app.use(express.static('.'));
Inside index.hbs
<head>
    <link href="./public/style.css" rel="stylesheet">
</head>

将外部文件内容导入车把

6 个答案: