I looked over some of the same questions on stack overflow and tried all the best answers. None of them worked.
I am learning html5 with CSS stylesheet. I looked over a website tutorial of building a web page with login form by flask.
So it has this base.html file which has some code links to a css file:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RELAX AND WORKOUT</title>
<link rel="stylesheet" href="bulma.css" />
</head>
Originally, followed by 'href' was a http link and it worked. But I downloaded the same css file and put it in the same folder as the base.html file so I can play with this css file.
They are both at ./project/templates/the_file
This is the link to download the css file: https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css
It was also originally the tutorial author put after 'href='. But when I changed it to my local file name 'bulma.css', it does not load the stylesheet at all.
I also tried absolute path and relative path. Neither of them worked.
I'm running it on Windows 10. Using Python 3.7 and flask.
So in my case, how do I make the html load this local css file?
Edit:
Ok, I made it work eventually.
I made a new folder called "static" and put the css file inside it. Then I changed the path to this:
<link rel="stylesheet" href="../static/bulma.css" />.
Does it mean flask treats the "templates" folder as a special folder only for html templates, it does not recognize other file formats?
But I saw a question which the person put his css file in the same directory. The answer is to just add a dot and it worked. That was why I put it with all the other html templates in my templates folder. But it never worked in my case.
From flask docs:
Flask automatically adds a static view that takes a path relative to the flaskr/staticdirectory and serves it. The base.htmltemplate already has a link to the style.cssfile:
{{ url_for('static', filename='style.css') }}
You need to create a folder called static inside your flask app directory with your static files inside, ex.: CSS, images, etc.
In your html code use:
<head>
<link rel="stylesheet" href= {{ url_for('static', filename='bulma.css') }}>
</head>
Try changing your href="bulma.css" to href="./bulma.css" and see if it works.
Are you sure you don't have to go into the templates folder? "/templates/bulma.css"
Hit F12 to open up the development pane. Go to the network tab. Refresh the page. Is the file listed in that list? You may have to refresh your cache to have it take effect. To do that: CTRL+SHIFT+R. If the file is listed in there you can view the preview to make sure it's current, if not you will still need to do a force refresh on the cache.
As for URL's you can also use an absolute file path starting at the root with href="../project/templates/filename.css" (use 2 periods). The following is a website for more info on this:
https://www.w3schools.com/html/html_filepaths.asp
I am developing an Angular 4 app and I want to apply some global styles. Following the tutorial at the angular site, I've created a "styles.css" file in the root directory of my app, and I'm referring to that stylesheet in the index.html of my app:
<link rel="stylesheet" type="text/css" href="styles.css">
The angular app is successfully compiled:
$ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
[...]
webpack: Compiled successfully.
But when I visit http://localhost:4200 in a Chromium browser, the console shows an error at
GET http://localhost:4200/styles.css
In a Firefox browser, the error is a bit more explicit:
GET
http://localhost:4200/styles.css [HTTP/1.1 404 Not Found 15ms]
The resource from "http://localhost:4200/styles.css" was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
Both files, index.html and styles.css are located in the root directory of my angular app.
I've tried to get more info about the problem :
nosniff
Blocks a request if the requested type is
"style" and the MIME type is not "text/css", or
"script" and the MIME type is not a JavaScript MIME type.
But I don't understand why it's bloking the request, since I've specified type="text/css" when referencing the stylesheet.
I just ran into the same issue. It appears to be a quirk of Express that can manifest itself for a few different reasons, judging by the number of hits from searching the web for "nodejs express css mime type".
Despite the type="text/css" attribute we put in our <link elements, Express is returning the CSS file as
Content-Type: "text/html; charset=utf-8"
whereas it really should be returning it as
Content-Type: "text/css"
For me, the quick and dirty workaround was to simply remove the rel= attribute, i.e., change
<link rel="stylesheet" type="text/css" href="styles.css">
to
<link type="text/css" href="styles.css">
Testing confirmed that the CSS file was downloaded and the styles did actually work, and that was good enough for my purposes.
I also removed rel = "stylesheet", and I no longer get the MIME type error, but the styles are not being loaded
Some answers suggested removing rel="stylesheet", that didn't work out for me however.
According to the expressjs documentation: https://expressjs.com/en/starter/static-files.html
use express.static function to serve static files such as CSS, JavaScript,etc...
app.use(express.static('public'))
and from there you should be able to load any file under the public directory
for example, if you have a style.css file inside the directory {PROJECT_PATH}/public/css/
http://localhost:3000/css/style.css will work.
In running into the same kind of issue for a full stack web application (in development), I simply solved the problem by correctly linking the css file to the page rendered. Removing the rel = stylesheet, as suggested above, prevents the error to show up in the browser but it does not load the styles that should be applied to the page. In short, it isn't a solution.
If you are using express-static you can use this as an example:
Server-side:
app.use(express.static(__dirname + "/public", {
index: false,
immutable: true,
cacheControl: true,
maxAge: "30d"
}));
Client-side:
<link type="text/css" rel="stylesheet" href="/main.css">
Just add a forward slash in front of the file you wish to link to the html page (if you are rendering html pages without using any template engines) and express-static will do the rest automatically for you.
Had a similar problem with a javascript file (as opposed to css) in an Angular app. In reality, the problem wasn't with the Mime type (as the outer error message indicated) but was ultimately a "404 Not Found" error.
In my case, putting the script file anywhere but in the "assets" folder resulted in the 404 and eventually the mime type error. The following tag worked for me in the head section of index.html:
<script src="assets/plugins/jquery.min.js" type="text/javascript"></script>
The assets folder is a sibling of the Index.html file.
This is solved my problem:
app.use('/public', express.static(path.join(__dirname, "public")));
A simple hack is to add a forward slash / before the the path to the stylesheet used. For me it was href='css/style.css', changed it to href='/css/style.css'. Worked like a charm.
I also had this issue.
I moved the script file to a different location and now there is no error:
from <script src="./scripts/simple-keyboard/keyboard.index.min.js" type="text/html"></script>
to <script src="./scripts/keyboard.index.min.js" type="text/javascript"></script>
As noted by Davelli, the issue wasn't a file mismatch but an error not found. It's strange it returned the wrong error!
if this solutions does not help:
app.use(express.static('public'))//for server
<link rel="stylesheet" href="/index.css">//for styles
Then make sure that "public" folder exists in the root directory. This was my case.
I was facing the same problem. But I found out that it has to do with using the right directory for your style.css file. So I tried this line of code below and it worked perfectly.
<link rel="stylesheet" type="text/css" href="/app/scss/style.css">
In my case I just include "/" before "css/style.css"
<link rel="stylesheet" href="css/styles.css" />
to
<link rel="stylesheet" href="/css/styles.css" />
I also use express.static('public')
What seemed to work for me was changing
<script type="text/javascript" src="/lib/matrix.js"></script>
to
<script type="text/javascript" src="./lib/matrix.js"></script>
I ran into this problem as well. I was able to fix the problem with the tip from Kirankumar Gonti.
Use the following line:
app.use('/public', express.static(path.join(__dirname, "public")));
Make sure to set the const path.
You also want to make sure your css folder is nested inside a public folder.
I ran into this problem as well. I was able to fix the problem with the tip from Kirankumar Gonti.
I used the following line of code in my app.js file, I didn't have a public folder but had my style.css stored in a css folder:
app.use('/css', express.static(path.join(__dirname, "css")));
In my /css/style.css file I used:
<link rel="stylesheet" type="text/css" href="/css/style.css" />
For anyone still having this error I was able to solve it by including "src/assets" in my angular.json file
"assets": ["src/favicon.ico", "src/assets", "src/upload.php"]
also the directory of your index.html should not be included in the assets. meaning you should not include "src" in "assets"
In my case I had jumbled up the code blocks below in reverse order so I was getting this error. If you have this issue, follow the below order and it might help
1.
app.use(express.static(path.join(__dirname, 'public')));
2.
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'public/index.html'));
});
3.
app.use('/api', cors(corsOptions), indexRouter);
This is what happened at me,
My site was archieved, so the css and js files are not available. After restore my webhost everything goes well.
So, please check are the URLs is correct or not.
I just asked this question: Why is Font Awesome only showing a square?.
The gist of it is that my font-awesome.min.css file was not working. I was getting 404 errors when trying to load icons from it. Someone gave the ridiculous suggestion of changing:
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
to
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
I tried their suggestion with confidence that it would not change anything, but it worked!
The code in MyProject/font-awesome/css/font-awesome.min.css (the filepath is correct) is identical to the code at //maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css.
Why is it that the CDN works, but my local copy gives me 404 errors?
Some clarification:
The file is being found when I try to link to the relative file (not using the CDN). The images within the CSS come up with 404. But with identical code at the CDN, there is no 404 for the images. I get the following error for each respective image:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63343/MyProject/font-awesome/fonts/fontawesome-webfont.woff2?v=4.3.0
The CSS file refers to font files using relative URLs. So when you copy the CSS, you also have to copy the font folder to MyProject/font-awesome/fonts.
Basically, when you download the Font Awesome ZIP file, you should extract the entire thing into MyProject/font-awesome. This will get you the all the files and they'll be in the proper location.
You are pointing to the absolute url. Try changing it to relative to Home page. Ex: /font-awesome/css/font-awesome.min.css.
When I include a jquery-ui stylesheet for a resizable jquery-ui dialog remotely like so
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css" />
I get this result:
but when I download the very same file and include it locally like so
<link rel="stylesheet" type="text/css" href="./jquery-ui.css" />
I get this result:
Note the missing resize handle in the lower right corner which seems to be the only difference.
What causes the difference?
Jquery-ui references a bunch of image sprite sheets. When including the reference from ajax.googleapis.com the path to the image resolves properly because google hosts those images on their server and has them in the proper location. However in your local copy of the jquery-ui.css i'm guessing there's a good chance your images are not in the proper location.
I'm using jquery ui in a current project and my folder structure is:
Content
images <--- this is the jquery ui sprite iamges folder
jquery-ui.css
go to /jquery-ui.css and make sure the bg paths are path correctly
In a Wicket 1.4 app, I have some static CSS & JS resources under [project root]/WebContent/css and [project root]/WebContent/js respectively.
My Wicket HTML files are in src/resources/fi/company/product/pages with corresponding Java classes in src/main/fi/company/product/pages. (In the resulting WAR file, the HTML & property files are of course in the same places as Java classes.)
The HTML files contain references to the resources such as:
<head>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="js/calendar.js"></script>
</head>
This works fine everywhere (or so we thought until recently). NB: my Java code does not reference these resources at all.
Looking at the source of a rendered page (whose URL is e.g. http://localhost:8080/report/42.4 or http://localhost:8080/?wicket:interface=:6:::: ), the resource reference appears as:
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
However, we just noticed that when the app is deployed somewhere else than (Tomcat) root, the resources break on non-bookmarkable pages.
In other words, when the URL is e.g.
http://localhost:8080/foobar/?wicket:interface=:2::::
and a page refers to
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
...the browser tries to fetch the resource at the invalid URL
http://localhost:8080/css/main.css
Now, what is the simplest (yet non-hacky) way to get these static resources working, regarless of the deployment path?
I could switch to using bookmarkable pages exclusively (which would require changing the constructors of the pages), but I suppose that shouldn't be necessary...
Edit: Looks like I got CSS resources working (on most places) simply by using <wicket:link>, as advised in this answer:
<head>
<wicket:link>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</wicket:link>
</head>
However, now the CSS references are broken on a page with an URL like http://localhost:8080/foobar/report/42.9
Wicket is trying to do something strange with the "css/main.css" path:
ERROR org.apache.wicket.RequestCycle - Can't instantiate page using constructor public fi.company.product.pages.ReportPage(org.apache.wicket.PageParameters) and argument 0 = "css" 1 = "main"
org.apache.wicket.WicketRuntimeException: Can't instantiate page using constructor public fi.company.product.pages.ReportPage(org.apache.wicket.PageParameters) and argument 0 = "css" 1 = "main"
at org.apache.wicket.session.DefaultPageFactory.createPage(DefaultPageFactory.java:212)
at org.apache.wicket.session.DefaultPageFactory.newPage(DefaultPageFactory.java:89)
at org.apache.wicket.request.target.component.BookmarkablePageRequestTarget.newPage(BookmarkablePageRequestTarget.java:305)
Edit 2: Actually I'm not sure if <wicket:link> is the right solution here, since these resource files are not "class path resources". I guess my question is, can you make this work while still using web context resources (i.e., without making these class path resources)?
Right, I solved it, and the solution turned out to be very surprising.
Earlier I wrote:
A curious thing is that without any changes, it seems I can no longer
reproduce the problem...
That wasn't quite true, as I had made one small change (that I thought was inconsequential): I had deleted a file WebContent/index.jsp which in our project was a remnant that served no purpose.
Once it dawned on me that this could have fixed it, I did some more testing, and indeed:
For static resources to work as expected, you must not have an index.html or index.jsp file in the root web content directory (i.e., the parent of the CSS and JS resource dirs), as that in some cases breaks ../ references.
This probably isn't even Wicket-specific, but perhaps it is Tomcat-specific—if anyone knows more, feel free to chime in. I'm dubious whether this question ever helps anyone else, but still, glad I got it working!