You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

从Flask迁移至FastAPI后自定义CSS样式失效问题求助

问题:Flask迁移到FastAPI后自定义CSS样式无法生效,仅Bootstrap正常

我将Flask应用迁移到FastAPI后,只有Bootstrap样式能正常生效,自定义CSS样式(包括checkbox的style属性)均无法应用,但这些样式在原Flask环境中完全正常。不确定这是FastAPI迁移导致的问题、与Bootstrap的冲突,还是数据库相关的其他原因。

项目结构

project-folder/
├── app.py
├── static/
|  └──style.css
└── templates/
   └──base.html

base.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Description" content="Enter your description here"/>

    <!-- 字体 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap" rel="stylesheet">

    <!-- 自定义CSS -->
    <link rel="stylesheet" href="/static/style.css">

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- 其他库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

    <!-- 预加载视频 -->
    <link rel="preload" href="/static/index/background.mp4" as="video">

    <!-- 脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <title>{% block title %}{% endblock %}</title>
</head>
...

app.py代码

from fastapi import FastAPI, Request, Depends
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
from fastapi.staticfiles import StaticFiles
from sqlmodel import Session, select
from pathlib import Path
from models import Vmilosti, engine

# 初始化FastAPI
app = FastAPI()

# 模板目录路径
BASE_DIR = Path(__file__).resolve().parent
templates = Jinja2Templates(directory=str(BASE_DIR / "templates"))

# 添加静态文件支持
app.mount("/static", StaticFiles(directory="static"), name="static")

# 向Jinja2环境添加`static`全局函数
templates.env.globals.update({
    "static": lambda path: f"/static/{path}"
})

# 获取数据库会话的依赖
def get_db_session():
    with Session(engine) as session:
        yield session

# 首页
@app.get("/", response_class=HTMLResponse)
async def home(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})

...

# 爱心页面(vmilosti)
@app.get("/vmilosti", response_class=HTMLResponse)
async def show_vmilosti(request: Request):
    return templates.TemplateResponse("vmilosti.html", {"request": request, "items": []})

# 爱心搜索
@app.get("/search")
async def search_vmilosti(request: Request, name: str = None, db: Session = Depends(get_db_session)):
    print("Received search request with name:", name)
    if name:
        # 按名称搜索(不区分大小写)
        query = select(Vmilosti).where(Vmilosti.name.ilike(f"%{name}%"))
        results = db.exec(query).all()
    else:
        results = []

    if not results:
        return {"message": "No results found."}

    return {
        "items": [
            {
                "name": item.name,
                "country": item.country,
                "image_url": item.image_url,
                "descriptionV": item.descriptionV
            } for item in results
        ]
    }

# 加入页面
@app.get("/join", response_class=HTMLResponse)
async def join(request: Request):
    return templates.TemplateResponse("join.html", {"request": request})

内容的提问来源于stack exchange,提问作者Aster

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.13 10:47:08