CODEWITHSUNDEEP
node.jshandlebars.js
Phuong Tran
Phuong Tran

Reputation: 59

stylesheet does not work in handlebar template

I am using handlebars template in express and node. But seems like it cannot apply style in my template here is my directory:

enter image description here

my template

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RYZE Report</title>
    <link rel="stylesheet" href="./css/style.css" >
   
</head>
<body>
    <h1>Hello hi</h1>
</body>
</html>

and in my app.js, I have this line

app.use(express.static(__dirname + '/public'))

Thank you

Upvotes: 1

Views: 1716

Answers (1)

Muhammad Alhrake
Muhammad Alhrake

Reputation: 46

I have looked at the code and I made a couple of improvements to make this work, instead of compiling the document without any inputs, I have made a css input as the following in the template.hbs:

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  {{css}}
</style>
<title>Hello, world!</title>
I have also edited the app.js to read the css along with the html and embed the css into it like so: app.js: 
const template = fs.readFileSync('template.hbs', 'utf8');
const css = fs.readFileSync('./public/css/style.css', 'utf-8');
const DOC = Handlebars.compile(template);

and used the DOC as following:

DOC({css})

this will inline the css inside of the hbs file, I hope this answers your question

Upvotes: 3

Related Questions