I have a problem with my application not finding my static files. This however only happens on a certain level. As you can see from the code fragments below, the css, images, js, etc works on certain files and not on others. Not sure what I am missing here.
My Stack: Spring Boot, Thymeleaf
Part of my application.yml file:
server:
port: 8090
servlet:
context-path: /myapp
My application public resources directory structure:
/resources
/public
/css
/images
/js
My application template structure and where the styles and images work:
/resources
/templates/index.html (works)
/templates/admin/index.html (works)
/templates/admin/user/admin/showuser.html (does not work)
Code from /resources/admin/fragments/header.html (Used as a header file for other files)
<!DOCTYPE html>
<html>
<head>
<link href="css/mycss.css" rel="stylesheet">
Code from /resources/templates/index.html (works) (Does not include the header.html fragment)
<link href="css/mycss.css" rel="stylesheet">
Code from /resources/templates/admin/index.html (works) (Includes header.html as a fragment using Thymeleaf)
<!--/*/ <th:block th:include="/admin/fragments/header"></th:block> /*/-->
Code from /resources/templates/admin/user/admin/showuser.html (does not work) (Includes header.html as a fragment using Thymeleaf)
<!--/*/ <th:block th:include="/admin/fragments/header"></th:block> /*/-->
Not sure how to fix this.
Thank you!
When your urls don't begin with a slash /, they attempt to resolve the current directory. For example:
Page: /templates/index.html
Css: css/mycss.css
The browser tries to locate /templates/css/mycss.css
If the cases that don't work:
Page: /templates/admin/user/admin/showuser.html
Css: css/mycss.css
The browser tries to locate /templates/admin/user/admin/css/mycss.css
If you want to make sure your css works everywhere, you need to make sure the link points consistently to the correct location. I'm guessing something like this would work:
<link th:href="#{/css/mycss.css}" rel="stylesheet">
(Using Thymeleaf to add the context, and to make the path absolute.)
Related
Problem:
I have a Hugo site with pretty standard setup. It uses asset pipeline to process SASS. It imports bootstrap, font-awesome, and also uses resources.ExecuteAsTemplate (please do check out main.css file). CSS resources are being generated properly (I checked resources/_gen/assets/scss/sass) but the .css file in public directory is an empty file. I am not able to find any problems in the code. See the code here, site here. I tried creating a new project with same head.html file and .scss files, and it generated CSS resources, and had them in the public directory properly.
Additional info:
Related files:
head.html
main.scss
Currently, I am not using PostCSS; just have the config file created. Would be replacing minify with postCSS on line 13 in head.html once empty .css file problem is solved.
Output of hugo version:
Hugo Static Site Generator v0.57.2-A849CB2D/extended linux/amd64 BuildDate: 2019-08-17T17:57:54Z
I would gladly provide any additional information if required. Please help!
In the head.html file, link tag is:
<link rel="stylesheet" integrity="{{ $css.Data.Integrity }}" href="{{ $css.Permalink }}">
Changing the link tag with following:
<link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}">
fixes the issue.
It seems that Hugo requires user to first call .Permalink of the asset and then only other related functions or variables.
See related discussion on Hugo Discourse here.
I am building a blog for myself using Jekyll, however, when I open the page in my browser, the SCSS fails to load. I try to navigate to the SCSS file through my browser but to no avail, the browser believes that the SCSS does not exist.
Here is how I add the stylesheet to the HTML:
<link rel="stylesheet" type="style/css" href="/_sass/_base.scss">
I did this to all of my stylesheets, and yet the it doesn't work.
Does anyone know how to fix this problem? Thank you in advance.
You do not link to stylesheets with an href to "/_sass/_base.scss".
Instead you should do the following:
create another directory to hold your "stylesheet", say, css/.
then add an empty stylesheet with an empty front matter block (required)
---
---
// this is an empty stylesheet named "style.scss"
// use #import here to load partials from your _sass folder
import your partial(s) into the above "stylesheet".
---
---
// this is an empty stylesheet named "style.scss"
// use #import here to load partials from your _sass folder
#import "base";
#import "mixins";
link your HTML page with the stylesheet:
<link rel="stylesheet" type="style/css" href="{{ 'css/style.css' | relative_url }}">
...and done!
Takeaways:
Import files from your _sass into a "dedicated stylesheet".
The dedicated stylesheet must contain the front matter block (can be empty).
Link your HTML file with the dedicated stylesheet.
Linked file has a .css extension even if your source file was css/style.scss or css/style.sass
You may hard-code the markup or use a Liquid construct to link the stylesheet.
When using a Liquid construct, prefer using the relative_url filter instead of using {{ 'css/style.css' | prepend: site.baseurl }} or {{ site.baseurl }}/css/style.css
I am using laravel and nodejs on WAMP Server on Windows 10. Now using the elixir mix function
elixir(function(mix) {
mix.sass('app.scss');
mix.version('css/app.css');
});
which is generating a version file for my app.css and placing it to
public\build\css\app-d37b3a9d94.css
now when I add the link of the css file by using elixir function, like following
<link rel="stylesheet" type="text/css" href="{{ elixir('css/app.css') }}">
it generates a path like
/build/css/app-d37b3a9d94.css
but with this, the css do not work on the resulted page. I troubleshoot the problem and found that it do not work due to the first slash in the path. when I manually add the above css file path (which elixir generated) by removing the first slash, it works. like the following
build/css/app-d37b3a9d94.css
I am not sure how to fix this problem where elixir generated path to css file work. Looks like elixir adding an extra slash before the path but I have checked the code on several places for laravel and the code works with first slash in path. Not sure why it is not working for me.
One more thing I have noticed, even if I remove mix.version('css/app.css'); from gulpfile.js (which generate version file) and run gulp command to update css/app.css, and use <link rel="stylesheet" type="text/css" href="{{ elixir('css/app.css') }}"> it still refer to the version file rather than referring to css/app.css Is it a correct behavior?
Try to use it this way:
<link rel="stylesheet" type="text/css" href="{{ asset(elixir('css/app.css')) }}">
Is it possible with a .htaccess redirect to have all style sheets and image paths, that are located in a subfolder, point to the appropriate folder(images/styles) in the the root folder? With out having to change the path in each file.
Let me try to explain my situation a little better.
Im using an include (header.inc.php) that contains my doctype, stylesheet links
<link href="styles/layout.css" rel="stylesheet" type="text/css">
and a couple other html element/images.
That becomes an issue when header.inc.php in pulled into my subfolder files, because style/layout.css does not exist in that folder. Additionally there are
a couple images that break because of the same reason,
<img src="images/image.jpg">
the images folder does not exist…
In my current .htaccess file, I have the below script with my include path (for local testing). Is there something similar to the include_path script that can help with the issues listed above?
php_value include_path ".:/Applications/MAMP/bin/php/php5.4.4/lib/php:/Applications/MAMP/htdocs/site/inc"
Here is an example of the file structure/hierarchy.
[ROOT FOLDER]
index.php
/subfolder
subpage1.php
subpage2.php
subpage3.php
/subfolder2
subpage1.php
subpage2.php
subpage3.php
contact.php
/images
/styles
/scripts
/inc
You don't need to use rewrites to solve this you just need to now how to define the source properly in your HTML elements.
Don't do this
<link href="styles/layout.css" rel="stylesheet" type="text/css">
Do this
<link href="/styles/layout.css" rel="stylesheet" type="text/css">
What this has changed is that your path is no longer relative to the file being browsed to but is now relative to the root of your web site.
Hope that helps.
I have
<link href="/smarter-computing/us/en/sc-mobile.css" type="text/css"/>
<script src="/smarter-computing/js/sc-common.js?fileversion-r21" type="text/javascript">//</script>
When I am working on these files locally I have to keep append //localhost/~vc/ before the path for JS and CSS files. I don't want to keep copy/pasting this path for the following and every <img> links in my code.
How can I use htaccess to redirect all url's pointing to //localhost/smarter-computing/ or /smarter-computing/ to append this path //localhost/~vc/ before my /smarter-computing path.
Thank you,
Vishwas
You can either make the document root your home directory in your apache config in localhost, or add this to the header of your pages:
<base href="/~vc/">