If there is any documentation on this topic on the Node-Red website, please let me know.
I am building a static website (HTML/JS/CSS) with Node-Red. I use HTTP GET nodes to call my Javascript and CSS files. I connect my Javascript through the tag, and this works well. I can connect my CSS file through the . When I visit that css_http response (which is linked to my Node-Red server), I can see the CSS file. However, all of my HTML files are ignoring the CSS files.
On the console, I get a "CSS was ignored due to mime type mismatch" warning, but I can access the CSS file through HTTP, and I double-checked to make sure my syntax was correct.
I currently load a single CSS file through the payload, and this works, but the code still looks messy in the console.
Is there any way I can link my external CSS file through a Node without using the payload (using the tag would be ideal)? Should I have my external CSS file in an HTML outside of the server? Why does it work for my JavaScript files but not my CSS ones?
As the error points out you are sending a CSS file with the wrong mime type.
"CSS was ignored due to mime type mismatch"
You can set the mime type with the "Content-Type" header in the http-response node.
Related
I'm trying to run a nodejs express webserver with a static frontend, I'm using myServer.use(express.static("public")); to handle the GET requests made to /. the public folder contains html, js, css and some immage rescources. those all get loaded in but the browser blocks/doesn't load them because they aren't of the text/html MIME type. Is there any way I could resolve this?
found the answer here: https://stackoverflow.com/a/48666785
for people who found this post, and not the one with the answer.
I have ran into an issue when using ejs to link external stylesheets and script tags. Here is my link for my stylesheet.
<link rel="stylesheet" href="styles/index.css">
When I highlight the link to the sheet and follow it (in VScode) I am brought to the correct file. I know it is going to the correct location for sure.
However, when I run this on my localhost:5000 I get an error. Here is what the error reads.
Refused to apply style from 'http://localhost:5000/styles/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I notice this is pointing to my localhost:5000/styles/index.css, but I do not want it to point to my local host, I want it to point to the directories I have set up in my file structure.
Does anyone know how to resolve this?
Thank you so much for your time.
if u are trying to use ejs in a nodejs project with express ,u should first define a folder that contain all the static files like css and images then give permission to the browser to get this file .check this:
https://expressjs.com/en/starter/static-files.html
I have the following error on all my JS files:
The script from “http://localhost:8086/home/js/classie.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
I made the project using Intelij and TomCat web server, the code for the scripts inside HTML5 looks like this:
<script type="text/javascript" src="js/script-delete-word.js"></script>
Why is this happening even thought I put type="text/javascript inside the script tag? The same problem is for the .css files too, I tried to change the location of js and css folder, but it didn't worked.
I made the project using Intelij
Your IDE isn't really relevant (unless you are using some sort of built-in web server that comes with it: if you are you should make that explicit in the question).
Why is this happening
Something is wrong with your HTTP server. You haven't said what server you are using (or provided the code for it if you've written it yourself).
Why is this happening even thought I put type="text/javascript inside the script tag?
The type attribute (when given a MIME type, the module value is a special case) tells the browser what to expect to get in the response to a request for the script's URL. This lets the browser avoid requesting scripts in programming languages it doesn't understand. The HTTP response headers are still authorative.
I'm using JavaScript to generate the text for a CSS file at runtime. I know that I can add this CSS to the HTML document by enclosing it in <style> tags, but it's a large file and my code would be less messy if it were to link to it as an external resource. Is it possible to link to a CSS file generated at runtime? There is no server involved and this must be done client-side.
Disclaimer: I will update this answer as the question is refined.
EDIT
It sounds like you are doing everything locally. In this case, it is not possible to write to your file system from scripts (like JavaScript) running in the browser (largely enforced for security reasons). While you can link and load CSS files from your local machine, you cannot write to them.
OLD ANSWER
You have a couple options, but I am most interested in what environment you are working in. The assumptions are in bold.
JSON color file stored on server: You should be generating this stylesheet on the server-side, and serving it up to your client. This involves creating a route (URL) to access the dynamically generated stylesheet, outputting formatted CSS (not too hard), and setting the headers with the correct MIME types. How you do the last part varies based on your server implementation (Node.js vs. PHP vs. etc.)
Can generate stylesheet only on client side (no server): In this case, assuming you do not have access to a server, but you can fetch your JSON color file (from somewhere, I guess), you really have no stylesheet resource to link to. This really limits optimization potential in terms of cacheing, etc.
Your only real option here is to create and populate the stylesheet in the browser. There is a decent article on how to do that here: Add Rules to Stylesheets with JavaScript
Have you tried this-
loadCssFile = function(fileName) {
var cssLink = $("<link rel='stylesheet' type='text/css' href='"+fileName+"'>");
$("head").append(cssLink);
};
// load the css file
loadCssFile("style.css");
When I try to include less.js it gives me a XmlHttpRequest Exception 101.
I include the .less file like this:
<link rel="stylesheet/less" type="text/css" href="anything.less" />
Now, I'm working on a Tumblr theme, and this ONLY happens when I upload the theme to Tumblr.
Both files are included correctly, I can reach the real files by clicking the links in the source code.
Can anyone help me with this one?
I used this for production only. It's very time consuming to compile the less file locally, embed it into the template and then upload it again.
Not a duplicate of:
LESS CSS minimal setup failure
I'm using Safari, and I'm using a global url (http://somelink.com/style.less).
You said:
The html file is then on www.tumblr.com, and the .less file is on
themelandia.com
This means that less.js file must make a cross domain ajax request in order to retrieve your .less file. Browsers do not allow this, and thus the request fails.
If you want to fix your problem, you must put the .less file somewhere on tumblr.com