Express isnt loading CSS files - css

For some reason my CSS isnt loading, I use sass so it creates a css folder outside of the public folder, And it just keeps doing that after i try to move it
my folder directory
-node project
-public
+index.htmlFOlder structure
-css
+style.css
+index.js (my server)
Here are my links in the css and the middleware im using to serve this in the index
html
<link rel="stylesheet" href="../css/style.css">
nodejs
app.use(express.static('public'))
Note im now also getting an error -
"Refused to apply style from 'http://127.0.0.1:3000/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."

To serve the multiple static files you need to add multiple middlewares in your index.js file
app.use(express.static('public'));
app.use(express.static('css'));
and link to CSS with this line in your index.html file
<link rel="stylesheet" href="style.css">

Related

Link style in electron application

I have application generated with electron-forge cli with webpack template. My files structure is:
I'm trying to add some styles to index.html but it doesn't work as expected. I tried to add in <head> of index.html:
<link rel="stylesheet" type="text/css" href="../css/index.css">
not working. I also tried to add:
import '../css/index.css'
to renderer/js/index.js (since it's bundled by webpack anyway) but it also doesn't work. What I'm doing wrong? Is the path to stylesheet not correct in my index.html head because of using webpack?

cannot load styles in angular cli new project

I have just created a new project using angulari cli.
When I try to include styles.css file in index.html
<link rel="stylesheet" type="text/css" href="styles.css">
I receive this in Chrome's dev tools network tab:
Refused to apply style from 'http://localhost:4200/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Any idea on how to fix this? I am running locally using ng serve
I also try adding
./styles.css
/styles.css
styles.css
when we create angular-cli project styles.css will apply default which you can see in .angular-cli.json as
app: {
styles:[
"styles.css"
]
}
here you can add more styles if you needed based on your project.
I just noticed that it is loaded automatically through some server requests for js files. So it is loading the styles through javascript.
For the new version angular cli, you no longer have to include the following lines
<link rel="stylesheet" type="text/css" href="styles.css">
in the index.html file. The cli will inject the contents automatically. So remove that line from the index.html and all should work.
if you need style.css just declare it in angular-cli.json as follows
"styles": [
"styles.scss",
],

Failed to load resource 404 style.css firebase

Receiving the following console log from my static website
Failed to load resource: the server responded with a status of 404 ()
on style.css
Project structure
root - home.html
folder inside root - styles
file inside 'styles' folder - style.css
(It's a simple website, for testing firebase)
I've used firebase to create the instance of my website and it outputted my html to a public folder with index.html but no css files.
Like so public/index.html
I've added inline css to account for this by using <style media="screen"> and it works but it's still not reading/finding my style.css file
style.css link inside index.html (firebase created)
<link rel="stylesheet" type="text/css" href="../style/style.css">
Looked into other answers but they're using bootstrap supplied cdn/url. I want to be able to use the one I created.
Firebase hosting will only host the files under your public folder. Which means that your style folder is not being uploaded and thus index.html can't detect the css file.
You need to move your style folder to have it inside the public folder and change the link to:
<link rel="stylesheet" type="text/css" href="style/style.css">

How to load a new css file by not loading existing css file

I am using spring, when i run my project in web common.css files and js files will load. Now, when i run project the existing css file should not load, new css file should load in runtime.For example, if i open my project in web then a.css file sholud load , if i open it from android b.css file should load.
In spring i used web interceptor class http://alvinalexander.com/java/jwarehouse/spring-framework-2.5.3/src/org/springframework/web/servlet/mvc/WebContentInterceptor.java.shtml, in this class i am getting file paths from lookup path variable when i run my project . Here i tried to update file path but it is not working.please help me how can we do it.
Thanks in advance.
Add that css file which you want to override other after that file.
For example you you want to override 'a.css' to 'b.css' than
<link rel="stylesheet" type="text/css" href="b.css">
<link rel="stylesheet" type="text/css" href="a.css">
Here a.css will override b.css

how to specify a custom stylesheet in scalate ssp

How to specify a custom stylesheet (external) to a SSP template (Scala Server Pages) in Scalate?
I tried specifying the html linking in the default.ssp file as follows.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<%= unescape(body) %>
</body>
</html>
However the stylesheet is not served by Scalatra (Jetty Web Server). I tried inserting the script through <%#include .. as well. Still no luck.
The web page is served without any stylesheet!
You need to have the style.css file as follows.
cd <YourProjectRoot>/src/main/webapp/
mkdir css
touch style.css
Create a style.css file inside a directory css which should be within the webapp directory, for the Scalatra to find out and serve the resource (stylesheet) appropriately.
Note: The folder should be named as css however the file can be named as anything.

Resources