Import external file content into handlebar

Z

6

I hope someone can give me a hint. I would like to import content from one file into my handlebar file. Is it possible? In my case, it is an css/scss file (e.g. reset.css) which stylings I want to import into my handlebar file (styleReset.hbs).

The "styleReset.hbs" should looks kind of like this:

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

P.S. I don't want use the -tag

Zabaglione answered 1/2, 2016 at 14:54 Comment(0)

A

13

Yes, it is possible to import the external css file into your handlebars .hbs file (i.e- Template engine).
Follow these steps :

First create a folder public under which place your css folder, which content all your css files. For ex folder structure would be - public/css/style.css (Note: This public folder contains all your static files like css, images, etc)
Register your public folder to express in your .js file by app.use(express.static(__dirname + '/public'));
Now you can import external css file in handlerbars template file by <link rel="stylesheet" href="../css/style.css">

Athene answered 29/4, 2018 at 15:6 Comment(1)

Thank you -- the 2nd bullet is the part I was stuck on. I forgot that my server needs to be able to serve files other than the main html routes. Thanks again! – Roundfaced 14/10, 2020 at 23:19

S

1

You can't import files with handlebars, only partials. You could precompile your reset.css as if it was a handlebars partial and include that with {{> filename}}.

Without knowing your build setup I don't think I can go into more detail.

http://handlebarsjs.com/precompilation.html

(Personally I'd use sass to import my reset.css to some main stylesheet that I include in the page.)

Sondrasone answered 2/2, 2016 at 8:13 Comment(0)

D

0

It is also possible to have a 'main' layout too, that can include header and footer.

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

Also, if you are using the module, "express-handlebars"(not "hbs"). You can set your extension name too.

Drawn answered 26/1, 2019 at 18:23 Comment(0)

B

0

1)In order to use your .css file in handlebars, file should be registered for use in app.js/server.js file shown bellow.

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

2)import the file in your handlebar file as given bellow image(it works for both main layout and child layout.

i) In Main Layout File

ii) In Child Layout

Broncobuster answered 6/9, 2020 at 12:43 Comment(1)

Hi, It would be great if just put the snippet in the answer itself, so other users don't have to navigate through the links. Thanks – Shibboleth 6/9, 2020 at 13:32

N

0

It's working after adding it

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

public/
      ├── style.css/

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

Nagging answered 5/4, 2023 at 6:49 Comment(0)

C

-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>

Collazo answered 22/9, 2018 at 16:26 Comment(0)

Recommended topics

Hot tags