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
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">
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.)
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.
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
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>
Related
I am having trouble making my handlebars file access my .css file.
My current folder structure looks like this:
root
public
css
base.css (css file)
img
ping.png (image file)
I am currently making /public/img folder and /public/css folder static using this code:
['css', 'img'].forEach(folder => app.use(express.static(__dirname + '/../public/' + folder)));
And I am referencing my .css file from handlebars using this code:
<link rel="stylesheet" href="/base.css" type="text/css" media="screen" title="no title" charset="utf-8">
I have tried to use other answers that are on stackoverflow but I don't think the answers work the same way for my project.
Is there any other mistake that I am making here?
Thank you.
I fixed my problem.
Since the .js file where I make /public/css folder and /public/img folder are in the same directory as /public folder is, I should have used ['css', 'img'].forEach(folder => app.use(express.static(__dirname + '/public/' + folder)));
I have a main.hbs file which holds my imported js and css. This works for my index.hbs but my other hbs files such as category.hbs require different (conflicting) .css files. How can I create more hbs files like main.hbs for holding these references pointing to the javascripts and stylesheets?
Right now, I have been just adding the requisite files on the top and bottom of my individual .hbs files.
<!-- At the top of category.js -->
<link rel="stylesheet" type="text/css" href="../public/styles/category.css">
<link rel="stylesheet" type="text/css" href="../public/styles/category_responsive.css">
Use different layout file.
main.hbs is your index.hbs
Create new layout file main2.hbs for your other .hbs files that has conflicting css files. main2.hbs will have your conflicting css files in there.
Your route file will call the main2.hbs layout file
res.render('view', { title: 'my other page', layout: 'main2' });
So the pages that has conflicting css file, use the second layout. This will mean you have 2 layout files that uses different css files.
More info How to change default layout in express using handlebars?
I'm creating an app with node.js and express. I'm using pug as my template engine. The styles from the stylesheet are not being applied to the view.
In my header.pug file I have
link(rel='stylesheets/style.css', type='text/css', href='/stylesheets/style.css')
The style sheet is located in public/stylesheets. I've also included the following code below in my app.js file.
// serve static files from /public
app.use(express.static(__dirname + '/public'));
app.set('view engine', 'pug');
app.set('views', __dirname + '/views');
When I run the application and expect the document I can open the stylesheet in the new tap and see the stylesheet, but it's not applying those styles to the pug file?
remove first /
also change rel atribute
like:
link(rel='stylesheet', type='text/css', href='stylesheets/style.css')
You can also try this way to load stylesheet.
index.pug
html
head
style
include style.css
title This is my first Pug file
body
div.split.left
div.centered...
Folder structure need to be like this.
views
index.pug
style.css
index.js
I build an application with spring and thymeleaf.
I import style.css in my HTML.
And I have to import other CSS from that file.
Here is a line from my sytle.css
#import url(../../js-plugins/bootstrap/dist/css/bootstrap.min.css);
It works when I don't apply the context path. But when I apply it, say I set with /path in application.properties, it doesn't work.
server.servlet.context-path=/path
How do I resolve this problem? How can I add my context path in my style.css?
Note:
I know I can do it by changing the way I import the bootstrap.min.css. I can import the file in my HTML.
Thank You
if you see this picture you should add style.css and template.html that you are using in thymeleaf should be part of the classpath , that is inside /resources/ folder
and then in the html (template.html)
add this code.
<link rel="stylesheet" type="text/css" href=#{classpath:templates/css/style.css} />
please see in the image below.
this will import the css class.
I have seen multiple questions related to this one, but I still couldn't understand what's the correct way of adding static CSS.
Adding the static CSS to the "static" folder the correct way?
Some of the suggestion I found on the internet were:
Requiring the CSS on main.js
Adding the CSS to the static folder and using a link tag pointing to the file on the static directory
I would like to know which one is the most correct.
Thank you.
if you're using webpack you can just import your stylesheets in your main js config and all your components will get the css. like this :
require('./assets/css/main.css');
Using sass, I import my app.scss file in the style tag of my main App.vue file
<style lang="scss">
#import './styles/app.scss';
</style>
Then import any other sass files in my app.scss file.