So, I have a layout.pug,an index.pug, and a login.pug.
Format of index.pug and login.pug:
extends layout
block content
//some content
This is the code in layout.pug that links the CSS file:
link(href='/stylesheets/creative.min.css', rel='stylesheet' ,type='text/css')
File structure:
public
stylesheets
creative.min.css
views
index.pug
layout.pug
login.pug
app.js
I have these lines in my app.js:
app.set('views', path.join(__dirname, './views'));
app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, './public')));
The problem is the CSS styling is being shown when I try to access index but not when I try to access login. While on the login page, I checked the page source and the CSS file was there so it's not as if it can't locate the resource (404). I've spent quite a few hours on this but couldn't get to the root of the problem. I'm a beginner in Node so any help would be appreciated. Thanks.
Related
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
Todo :
css file based on subdomain loaded. For e.g: I have abc.css, xyz.css and these css should be loaded based on subdomains like if abc then abc.css must be loaded and so on.
Tried Cases :
Dynamically load css from angular-cli.json (Couldn't found a way to
load dynamically)
Loading css on index.html (MiME type issue encountered)
Use style-loader on app init e.g require("style-loader!./style.css");
Used version : Angular 4.4.6 version.
Can anyone help me on this?
I am open to all suggestions, please suggest.
Thank You.
Try this:
In the HTML template:
<link rel="stylesheet" [href]="getCssUrl()">
In the component.ts:
constructor (private sanitizer: DomSanitizer) {}
getCssUrl() {
// Implement your code to return CSS url based on sub-domain
const cssURL = xxx;
return sanitizer.bypassSecurityTrustResourceUrl(cssUrl);
}
I am trying to implement my css in my html with nodeJS, Express and socket.io but i got the error: 'Refused to apply style from 'http://localhost:8000/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.'
Note: I only got the error displaying the css files when i run in my localhost:8000 (Node.js) but not in my normal index.html file.
here is my config in index.js
var app = express()
.use(SocketIOFileUpload.router)
.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
})
here is my files structure
style
style.css
images
lib
node_modules
index.html
appConfig.js
index.js
So far, what i did is:
i change my css script from
<link rel="stylesheet" type="text/css" href="style/style.css"/> into type="text/html" : it did remove the error but my css still have not applied in the html
checked the spelling of my css file name: no issue on the name or the css path
i have search all over the internet, but nothing helps. It might be i configured it wrongly since i am not really familiar with the config, but i don't have any ideas. Any helps or hints area really helpful. Thanks!
Can you list your directory structure here? The initial error is that you wanted to apply css to your html file but the css file when returned by node had a mine type of html. When applying style if you manually set the mine time to html for a css file, it’s certainly not going to work. What is your css file name and path? A speculation I have is that your app is not configured to serve the css file. When asked for the css file, the server is probably responding with a 404 which is a mime type of html, hence the error. Look at your nose console logs when you load the page for a 404 for the css. You’ll have to show us where/how you are serving static files for us to help any further.
Yep you have the style.css inside of style, you need to set the static directory accordingly. Here is a reference
app.use(express.static('public'))
taken from https://expressjs.com/en/starter/static-files.html
In your case you can wrap your images and styles folder under public and then use the given example. In production however, you will want to serve static files using a reverse proxy like Nginx.
my fix was
app.use(express.static(__dirname + '/'));
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>
I am building a test app to learn how to organize multiple files with METEOR.
I have a head.html and inside I have the following link to my custom CSS:
<!-- Custom CSS -->
<link type="text/css" rel="stylesheet" href="/stylesheets/globals/style.css"/>
Very normal, Yet I have trouble to make that working.
Here is my app directory:
-app folder
---client
-----head.html
-----index.html
-----stylesheets
-------globals
---------style.css
I know it seems to be a very basic question but I can not figure it out.
Basically you have 2 ways of inserting CSS in a Meteor project :
Using the Meteor build tool to automatically concatenate and minify all your CSS files living in the client/ directory : in this case you don't need to import your stylesheets using a link tag in the head. This is perfect for vital CSS files that your app should load when started.
Example : put your CSS file under client/stylesheets/globals/style.css and that's it, no need to import it, it's automatically injected in your project by Meteor.
Using the classic way of importing stylesheets in a web application : you can put your CSS files inside the public/ directory and they will be served by your app server. In this case the Meteor build process will be skipped so files won't be concatenated together nor minified. Use this method when you want to lazy load big CSS files only needed in a subpart of your app (for example admin section styling).
Example : put your minified CSS file under public/stylesheets/admin/style.css, and use something like iron:router to load the CSS file when hitting the admin route.
Router.route("/admin", {
// onRun hooks executed only once
onRun: function(){
// create a link taf holding a reference to our publicly served CSS file
var link=$("<link>",{
rel: "stylesheet",
href: "/stylesheets/admin/style.css"
});
// append to the head tag
$("head").append(link);
}
});