1 reply

Express server not loading my stylesheet

Hello guys, sorry to disturb you all; I try to build a small server using express; my html file is being delivered but the stylesheet related to it isn't... I don't understand why, I'm having the following error in the browser:

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

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

Here is my code:

import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';
import {router} from '../routes/root.js'


const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const port = 8080;
const app = express();

// Serve static file
app.use('/M00967932',express.static(path.join(__dirname, '../../public')));

// Handle form submission
app.use(express.urlencoded({extended : false}));


app.get('/M00967932', router);


app.listen(port, () => {
    console.log(`Server started on port ${port}`);
})

////
import express from 'express';
import path from 'path';
import  {fileURLToPath} from 'url';


const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const router = express.Router();

router.get('/M00967932(/index.html)?', (req,res) => {
    res.sendFile(path.join(__dirname, '../public/HTML/index.html'));
});

export {router};

import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';
import {router} from '../routes/root.js'


const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const port = 8080;
const app = express();

// Serve static file
app.use('/M00967932',express.static(path.join(__dirname, '../../public')));

// Handle form submission
app.use(express.urlencoded({extended : false}));


app.get('/M00967932', router);


app.listen(port, () => {
    console.log(`Server started on port ${port}`);
})

////
import express from 'express';
import path from 'path';
import  {fileURLToPath} from 'url';


const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const router = express.Router();

router.get('/M00967932(/index.html)?', (req,res) => {
    res.sendFile(path.join(__dirname, '../public/HTML/index.html'));
});

export {router};

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../styles/style.css" />
    <title>Website</title>
  </head>
  <body>
    <h1>Just some text</h1>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../styles/style.css" />
    <title>Website</title>
  </head>
  <body>
    <h1>Just some text</h1>
  </body>
</html>

I don't understand, what is the problem here please; the link in my html file is correct but when I open it with live server it works... what is my mistake here please

KP-C

Kevin Powell - Community•16mo ago•

1 reply

Faker

Express server not loading my stylesheet

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

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

Here is my code:

import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';
import {router} from '../routes/root.js'


const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const port = 8080;
const app = express();

// Serve static file
app.use('/M00967932',express.static(path.join(__dirname, '../../public')));

// Handle form submission
app.use(express.urlencoded({extended : false}));


app.get('/M00967932', router);


app.listen(port, () => {
    console.log(`Server started on port ${port}`);
})

////
import express from 'express';
import path from 'path';
import  {fileURLToPath} from 'url';


const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const router = express.Router();

router.get('/M00967932(/index.html)?', (req,res) => {
    res.sendFile(path.join(__dirname, '../public/HTML/index.html'));
});

export {router};

import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';
import {router} from '../routes/root.js'


const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const port = 8080;
const app = express();

// Serve static file
app.use('/M00967932',express.static(path.join(__dirname, '../../public')));

// Handle form submission
app.use(express.urlencoded({extended : false}));


app.get('/M00967932', router);


app.listen(port, () => {
    console.log(`Server started on port ${port}`);
})

////
import express from 'express';
import path from 'path';
import  {fileURLToPath} from 'url';


const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const router = express.Router();

router.get('/M00967932(/index.html)?', (req,res) => {
    res.sendFile(path.join(__dirname, '../public/HTML/index.html'));
});

export {router};

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../styles/style.css" />
    <title>Website</title>
  </head>
  <body>
    <h1>Just some text</h1>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../styles/style.css" />
    <title>Website</title>
  </head>
  <body>
    <h1>Just some text</h1>
  </body>
</html>

I don't understand, what is the problem here please; the link in my html file is correct but when I open it with live server it works... what is my mistake here please

Express server not loading my stylesheet

Express server not loading my stylesheet

Similar Threads

Similar Threads

Similar Threads