如何在NiceGUI中添加本地静态CSS文件，适配iframe无需修改路径？

方案1：映射根路径静态文件（推荐大量文件场景） #

直接将CSS所在目录映射到网站根路径，和你在JustPy中的实现效果完全一致，无需给路径加前缀：

from nicegui import app
from pathlib import Path

# 替换为你的CSS文件实际存放目录
css_directory = Path(__file__).parent / "resources/css"
# 将目录映射到根路径，保持原有访问路径
app.add_static_files('/', css_directory)

之后就能直接通过/ceur-ws.css、/ceur-ws-semantic.css访问对应文件，完全不需要修改iframe中的CSS引用路径。

方案2：嵌入CSS内容到页面头部 #

如果不需要单独访问CSS文件，也可以直接把CSS内容注入到页面头部，批量处理也很方便：

from nicegui import ui
from pathlib import Path

# 批量加载指定CSS文件
target_css = ["ceur-ws.css", "ceur-ws-semantic.css"]
css_dir = Path(__file__).parent / "resources/css"

for css_file in target_css:
    css_content = (css_dir / css_file).read_text()
    ui.add_head_html(f"<style>{css_content}</style>")

方案对比 #

• 方案1适合需要保持独立CSS文件路径的场景（比如iframe引用外部CSS），无需修改任何现有代码；
• 方案2将CSS嵌入到HTML中，适合不需要对外暴露CSS文件的场景。

内容的提问来源于stack exchange，提问作者Wolfgang Fahl