将外部文件内容导入车把答案

【问题标题】：Import external file content into handlebar将外部文件内容导入车把
【发布时间】：2016-02-01 14:54:36
【问题描述】：

我希望有人能给我一个提示。我想将一个文件中的内容导入到我的车把文件中。是否可以？就我而言，它是一个 css/scss 文件（例如 reset.css），我想将其样式导入到我的车把文件（styleReset.hbs）中。

“styleReset.hbs”应该看起来像这样：

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

附：我不想使用 -tag

【问题讨论】：

标签： css handlebars.js assemble

【解决方案1】：

是的，可以将外部 css 文件导入您的车把 .hbs 文件（即模板引擎）。
按照以下步骤操作：

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

【讨论】：

谢谢——第二个子弹是我坚持的部分。我忘记了我的服务器需要能够提供除主要 html 路由之外的文件。再次感谢！

【解决方案2】：

您不能导入带有把手的文件，只能导入部分文件。您可以预编译您的 reset.css，就好像它是部分车把一样，并将其包含在 {{> filename}} 中。

在不知道您的构建设置的情况下，我认为我无法详细说明。

http://handlebarsjs.com/precompilation.html

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

【讨论】：

【解决方案3】：

也可以有一个“主”布局，可以包括页眉和页脚。

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

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

【讨论】：

【解决方案4】：

1)为了在车把中使用您的 .css 文件，应在 app.js/server.js 文件中注册文件以供使用。

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

2) 将文件导入到您的车把文件中，如下图所示（它适用于主布局和子布局。

i) 在主布局文件中

ii) 在子布局中

【讨论】：

嗨，如果只是将 sn-p 放在答案本身中，那就太好了，这样其他用户就不必浏览链接了。谢谢

【解决方案5】：

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>

【讨论】：