CODEWITHSUNDEEP
csshandlebars.jsassemble
Mark
Mark

Reputation: 200

Import external file content into handlebar

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

Upvotes: 6

Views: 28554

Answers (6)

Siddhartha Mukherjee
Siddhartha Mukherjee

Reputation: 2943

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

Upvotes: 0

Kiran Poojary
Kiran Poojary

Reputation: 233

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

ii) In Child Layout enter image description here

Upvotes: 0

George Ijidola
George Ijidola

Reputation: 1

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.

Upvotes: 0

Iash
Iash

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

Upvotes: -1

Sabunkar Tejas Sahailesh
Sabunkar Tejas Sahailesh

Reputation: 4926

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

enter image description here

Upvotes: 13

ekuusela
ekuusela

Reputation: 5292

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

Upvotes: 1

Related Questions