編碼的世界 / 優質文選 / 生涯

css文件能加載但是沒有生效


2022年6月27日
-   

使用nginx+django部署項目的時候,為了提高加載速度,我將css,js,image等靜態資源在nginx中配置了路徑
本地測試沒有問題,代碼提交線上就出問題了,出現了這麼個情況:
css文件能加載但是沒有生效

經過查找資料,大概從以下兩個方面入手檢查:
1、考慮css文件引用是否正確 2、考慮服務器nginx配置靜態文件是否正確
打開瀏覽器console,出現這麼一句話
Resource interpreted as Stylesheet but transferred with MIME type text/plain

先嘗試修改css文件引用,檢查必要的參數是否都有,路徑是否正確
 <link rel="stylesheet" type='text/css' href="/static/css/toutiao.css">

依然沒有用,後來發現是nginx配置的問題,我的配置文件中沒有以下兩句,加入之後就ok了
include mime.types;
default_type application/octet-stream;

最後修改nginx配置如下:
http {
# css文件正常加載
include mime.types;
default_type application/octet-stream;
server {
listen 8000;
server_name localhost;
location ^~ /static/ {
# 靜態文件路徑,不包含static
root staticPath;
}
location / {
proxy_pass http://127.0.0.1:8090; # 轉發路徑
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
}
T

參考
  • css文件 請求的MIME類型為 text/plain 的解決方法
  • 網頁中css文件引入後沒有效果?怎麼解決
  • 熱門文章