I am making a Web Project using NodeJS and in which I'm linking to the stylesheet in the header file, which I've included in all of my EJS files
The location of the header file is as follows
root -> views -> partials -> header.ejs
The location of the stylesheet is as follows
root -> public -> style.css
I've used this line to link with the stylesheet in the header.ejs file
<link rel="stylesheet" href="../style.css">
Now, this stylesheet is being rendered in all pages, except for one.
Path of page where the stylesheet isn't working :-
/campgrounds/:id/edit
Other pages (where style.css is working properly) :-
/campgrounds
/campgrounds/new
/campgrounds/:id
What is the reason behind this and how to solve this
Best practice for linking to resources is to use absolute pathing which means start at the root and work up the structure.
By using / it will start at the root of your application directory.
<link rel="stylesheet" href="/public/style.css">
Related
I'm crating application in angular with SSR
How do I apply <link rel="preload" href="/styles.css" as="style" /> to head section or Link header in order to preload/prefetch whole styles.css file?
Using plain styles.css is not enoug as production build generate file that contains random characters like styles.7541caaaab536370.css (different in every build)
Googling about preloading and prefetching in angular only results in preloading components/modules and I'm out of ideas
You can include the styles.css file in the assets folder. This will prevent the angular build process from "fingerprinting" the file and the resulting build file will simply be named styles.css allowing you to reference it directly from your index.html.
I have html in /html/test-html/index.html here. There are also css and images like this one: /html/test-html/css/style.css
When I open index.html in browser styles and images are loaded correctly.
When I'm trying to render it's contents by php echo function I get problems with 404 error, because paths in index.html and style.css are relative, like this one:
<link src="css/style.css" rel="stylesheet" type="text/css" />
So when I echo index.html contents in my script (i.e. by url like http://localhost/product1) browser tries to find style.css by this url:
http://localhost/css/style.css
But actually file is located in
/html/test-html/css/style.css
I think that good idea is to simulate URL like browser in http://localhost/html/test-html/, but actually we are in http://localhost/product1 (with RewriteRule), but without a redirect.
In other words, I want browser to think that http://localhost/product1 is http://localhost/test-html and server to think that http://localhost/product1 is http://localhost/index.php?r=product/view&id=1
Is it possible?
I guess the title might be confusing. I didn't know how to word it but say i have a directory as follows:
/
app.js
/static
/styles
main.css
/views
index.html
/files
1.html
2.html
If I serve 1.html and have in it, i have a css file as
<link rel="stylesheet" type="text/css" href="static/styles/main.css">
This does not load the css file. It works fine on the index page I'm assuming because it is directly inside the views folder. Because I'm trying to access something in the files folder, its not working. Could someone point me in the right direction?
Also note I have set
server.set('views', __dirname + '/views')
server.use('/static', express.static(__dirname + '/static'));
Try removing static from href attribute
<link rel="stylesheet" type="text/css" href="/styles/main.css">
And change the static files serving configuration to
server.use(express.static(path.join(__dirname, 'static')));
I tried to look for some info related to bundling, tried different scenario with the same result: doesn't work!
Here is the project structure:
..........
Content
css
style.css
fonts
images
.........
Scripts
Plugin1
src
css
style1.css
js
js1.js
Plugin2
src
css
style2.css
js
js2.js
Plugin3
src
css
style1.css
js
js2.js
somejs.js
someotherjs.js
case 1 - works
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/css/style.css"));
case 2 - doesn't work
bundles.Add(new StyleBundle("~/js/style").Include(
"~/Scripts/Plugin1/src/css/style1.css",
"~/Scripts/Plugin2/src/css/style2.css",
"~/Scripts/Plugin3/src/css/style3.css"));
My question is, how can I bundle my css from different folders in one single bundle? I know that if the styles are all in the same folder then will work.
Does this have to do anything with the path itself? Does the name of the bundle ... new StyleBundle("~/js/style").. must match the actual location of the css files (folder structure)?
When the page loads in the page source there is missing the bundle key for the one that doesn't work while for the other one is present:
<link href="/js/style?v=" rel="stylesheet"/>
<link href="/Content/css?v=z_NN8-Oubjqwg7jFATA50T7SzahDLay9Fi3Lti_eSJ81" rel="stylesheet"/>
I am attempting to make a small website with a directory structure like this:
rootURL/
landing/
aboutME/
common/
app1name/
app2name/
etc...
Within each of the sub folders are the directories css/ , js/ and html/ so I keep my pages and apps separate and my file types separate within them, which seems sensible to me.
My root page I want to load when some one goes to rootURL.com is
rootURL/landing/html/landing.htm
1) Is this something which can be typically configured on a web server?
2) And is it possible to reference paths to css and script files in different directories? For example my lanidng page rootURL/landing/html/landing.htm , can it use the line
<script type="text/javascript" src="rootURL/common/jQuery.js"></script>
and if not is there anothr way to access files in other directories?
Thanks
All of that is possible. For your landing page, will either have to have a redirect page in the root directory, use URL rewriting, or simply put your home page in the root directory.
To reference paths you can use
<script type="text/javascript" src="/path/to/file.js">
or
<script type="text/javascript" src="../relative/path/to/file.js">
or
<script type="text/javascript" src="http://rootURL.com/path/to/file.js">