我遇到了一個問題，我無法將我的 CSS 加載到從路由器呈現的視圖中。app.js對于從專案目錄的根中呈現的視圖，CSS 加載良好
這是我的目錄結構，
node_modules/
public/
styles/
form.css
home.css
routes/
form.js
product.js
views/
index.ejs
savoury.ejs
app.js
package.json
這是我的app.js：
import express from 'express';
import path from 'path';
import productRouter from './routes/product.js';
import formRouter from './routes/form.js';
import dotenv from 'dotenv';
dotenv.config();
const port = process.env.PORT || 3030;
const __dirname = path.resolve();
const app = express();
app.use(express.urlencoded({ extended: true })); // access request body for POST
app.use(express.json()); // process JSON in request body
app.use(express.static(path.join(__dirname,'public'))); // Look up our static files
app.set('view engine','ejs');
// Mount our routers
app.use('/product',productRouter);
app.use('/form',formRouter);
app.get('/',(req,res) => {
res.render('index');
})
app.listen(port, () => { console.log(`Server running on port ${port}`) });
問題出現了，至少據我所知，當我嘗試從一個名為的路由器渲染視圖時，該路由器formRouter在我的routes目錄中定義為，
import express from 'express';
// Serve our forms from this router
const formRouter = express.Router();
// Render our add savoury form from here
formRouter.get('/add/savoury',(req,res) => {
res.render('savoury');
});
鏈接樣式表的視圖savoury如下：
<link rel="stylesheet" href="styles/form.css">
然后我在瀏覽器控制臺中收到以下錯誤：Refused to apply style from 'http://localhost:3030/form/add/styles/form.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
我不知道問題是什么。任何幫助表示贊賞。
uj5u.com熱心網友回復：
拒絕應用來自 'http://localhost:3030/form/add/styles/form.css' 的樣式，因為它的 MIME 型別 ('text/html') 不是受支持的樣式表 MIME 型別，并且啟用了嚴格的 MIME 檢查。
因此，您收到該錯誤訊息會導致您嘗試使用 404 訊息設定 html 樣式
但是為什么您會收到 404 錯誤？
由于您呼叫的路由或路徑，您收到 404 錯誤
如果您仔細觀察，您會看到“http://localhost:3030/form/add/styles/form.css”是它嘗試請求不存在的 css 的路徑
現在在你的檔案路徑中你得到了
public/
styles/
form.css
home.css
這意味著您應該呼叫的路徑是
https://localhost:3030/styles/form.css
不是 http://localhost:3030/form/add/styles/form.css
所以要擺脫錯誤使用編輯你的html到
<link rel="stylesheet" href="/styles/form.css">
樣式前面的斜線表示它從根目錄呼叫
但省略它或使用 ./styles 意味著它來自該路由檔案夾
如果這個答案是您的問題，請記住將其標記為已回答
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/437822.html
標籤：javascript css 节点.js 表示
上一篇：如何對齊網格不同列中的內容