Can't link CSS / JS files in HTML file

Question

I'm having problems with linking CSS and JS files in my HTML file's head.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" src="https://www.w3schools.com/w3css/4/w3.css">
    <script src="/socket.io/socket.io.js"></script>
    <script src="client.js" type="script"></script>
  </head>

File paths look like this:

>node modules
-package.json
-package-lock.json
-server.js // Make the express and socket.io stuffs
>main //folder
   -index.html 
   -style.css
   -client.js

I've looked at a lot of previous threads about this but nothing fixed my issue.

Both the CSS and JS files are correct, there aren't any errors in them, or at least my editor (VS code) says so.

The console gives me this error:

Refused to apply a style from 'http://localhost:3000/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Stylesheet may be detected as html file if starts with comments. — Ali Sheikhpour, Sep 23 '18 at 15:24
Also check if `app.use(express.static(__dirname + '/public'));` doesn't have forwarding slash at the end, the reference to the files should start with slash like `/style.css` — Ali Sheikhpour, Sep 23 '18 at 15:28

score 0 · Answer 1 · answered Sep 23 '18 at 15:34

0

Please try to remove the comments from the beginning of the style file for more info check this answer https://stackoverflow.com/a/48270432/5092690

answered Sep 23 '18 at 15:34

id3vz

460
4
15

" There are no comments in any of my files – Mxm 11 mins ago " – Raymond Nijland Sep 23 '18 at 15:37

score 0 · Answer 2 · answered Sep 23 '18 at 16:06

0

Replace

 <link rel="stylesheet" type="text/css" src="https://www.w3schools.com/w3css/4/w3.css">

with

 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

answered Sep 23 '18 at 16:06

Aqid Khatkhatay

23
4

I don't think this can be the problem. – Mxm Sep 23 '18 at 16:11

score 0 · Answer 3 · answered Sep 07 '21 at 14:18

0

I was facing the same problem while using visual studio code the css and javascriplt files are not connected to my HTML file although I have checked everything and its all correct it's solved when I type "link" in the text editor, I choose "link:css" from the dropdown menu of Auto complete and the same idea with javascript file type "script" and choose "script:src"

answered Sep 07 '21 at 14:18

Menna Azban

1

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution. – Community Sep 07 '21 at 15:18
This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. – ShoeMaker Sep 08 '21 at 05:35

Can't link CSS / JS files in HTML file

3 Answers3