EJS/Tailwind 项目问题：无法获取 /dist/output.css-解网

问：

一段时间以来，我一直在将我的输出.css文件链接到我的header.ejs部分时遇到问题。我似乎无法弄清楚问题出在哪里。我在.css.css控制台中收到错误“拒绝应用'http://localhost:3000/dist/output.css'的样式，因为它的MIME类型（'text/html'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./views/*.ejs",
    "./views/partials/*.ejs"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    {
      tailwindcss: {},
      autoprefixer: {},
    },
  ],
};

package.json

{
  "dependencies": {
    "body-parser": "^1.20.2",
    "ejs": "^3.1.9",
    "esm": "^3.2.25",
    "express": "^4.18.2",
    "path": "^0.12.7"
  },
  "name": "capstone-project",
  "version": "1.0.0",
  "description": "Blog Website",
  "main": "app.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon app.js",
    "tailwind": "npx tailwindcss -i ./src/styles.css -o ./dist/output.css --watch"
  },
  "author": "Danse",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.5"
  }
}

应用.js

import express from "express";
import bodyParser from "body-parser";

import ejs from 'ejs';
//Setting up local server
const app = express();
const port = 3000;


//Middlewear
app.use(bodyParser.urlencoded({ extended: true }));


//Tailwind use
app.set('view engine', 'ejs');
app.use(express.static('dist'));

app.get("/", (req, res) => {
    res.render("index");
});


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

标头.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Poopy-Boopy Blog</title>
    <link rel="stylesheet" href="../../dist/output.css">
</head>


<body>
    <header class="bg-black">
        <div class="">
            <h1 class="text-red-600">Hello</h1>
        </div>
    </header>
    <main>

索引.ejs

<!-- Header -->
<%- include("partials/header.ejs") %>

<!-- Body -->



<!-- Footer -->
<%- include("partials/footer.ejs") %>

我试图通过使用我的应用程序.js 中的节点的路径模块来更改引用 dist 文件夹的方式进行故障排除，但这似乎不起作用。我还试图查看我的 header.ejs 文件中是否有问题，因为我认为我可能链接错误，但目录让我直截了当地输出 .css

PS - 如果您有任何关于我应该如何更改代码结构的提示，请lmk，将不胜感激:)

节点.js Tailwind-CSS EJS

EJS/Tailwind 项目问题：无法获取 /dist/output.css

EJS/Tailwind project issue: Cannot GET /dist/output.css

评论