TTC
Theo's Typesafe Cult•2y ago
johnny the fifth

Refused to apply style from 'http://localhost:8080/dist/output.css' because its MIME type

i am using express js with node , ejs templates , tailwind css for some reason my css is not working and i am getting this in the console Refused to apply style from 'http://localhost:8080/dist/output.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. index.js 
import { fileURLToPath } from 'url';
import { dirname } from 'path';
import express from "express";
import path from 'path';
const app = express();
app.set("views",path.join(fileURLToPath(dirname(import.meta.url)),"views"));
app.set('view engine', 'ejs');
app.use(express.static(path.join(fileURLToPath(dirname(import.meta.url)),'public')));
app.use(express.static(path.join(fileURLToPath(dirname(import.meta.url)),'dist')));

app.get('/', (req, res) => {
  res.render("index");
});
import { fileURLToPath } from 'url';
import { dirname } from 'path';
import express from "express";
import path from 'path';
const app = express();
app.set("views",path.join(fileURLToPath(dirname(import.meta.url)),"views"));
app.set('view engine', 'ejs');
app.use(express.static(path.join(fileURLToPath(dirname(import.meta.url)),'public')));
app.use(express.static(path.join(fileURLToPath(dirname(import.meta.url)),'dist')));

app.get('/', (req, res) => {
  res.render("index");
});
index.ejs file 
<!DOCTYPE html>
<html lang="en">
<head>
   <link  type="text/css"  href="/dist/output.css" rel="stylesheet" />
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <h1 class="text-5xl  text-orange-400">books Directory</h1>
   <section>
    <!--  render all books after fetching -->
   </section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
   <link  type="text/css"  href="/dist/output.css" rel="stylesheet" />
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <h1 class="text-5xl  text-orange-400">books Directory</h1>
   <section>
    <!--  render all books after fetching -->
   </section>
</body>
</html>
tailwind.config.js 
 /** @type {import('tailwindcss').Config} */
export default {
  content: ['/views/*.ejs',
    "./views/index.ejs",
    "/views/index.html",
    "./views/**/*.ejs"
  ],
  theme: {extend: {},},plugins: [],
}
 /** @type {import('tailwindcss').Config} */
export default {
  content: ['/views/*.ejs',
    "./views/index.ejs",
    "/views/index.html",
    "./views/**/*.ejs"
  ],
  theme: {extend: {},},plugins: [],
}
folder structure : -
No description
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?