将外部文件内容导入车把

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

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

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

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

附言我不想使用 -tag

css handlebars.js assemble
6个回答
12
投票

是的,可以将外部 css 文件导入您的车把 .hbs 文件(即模板引擎)。
请按照以下步骤操作:

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


1
投票

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

{{> filename}}
.

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

http://handlebarsjs.com/precompilation.html

(我个人会使用 sass 将我的 reset.css 导入到我包含在页面中的一些主要样式表中。)


0
投票

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

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

此外,如果您使用的是“express-handlebars”(不是“hbs”)模块。您也可以设置您的分机名称。


0
投票

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

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

2) 将文件导入车把文件中,如下图所示(它适用于主布局和子布局。

i) 在主布局文件中

ii) 在子布局中


0
投票

添加后有效

// app.js file
app.use(express.static(path.join(__dirname, "public")));

public/
      ├── style.css/

// htm file
<link rel="stylesheet" href="/style.css">

-1
投票
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>    
© www.soinside.com 2019 - 2024. All rights reserved.