如何在Strapi 4中添加自定义CSS文件并正确放置DOM加载JS函数

核心问题说明 #

你之前将JS代码放在根目录的admin/app.js未生效，是因为Strapi 4的Admin面板自定义逻辑已迁移到src/admin目录下，旧位置的文件不会被构建工具识别执行。

分步解决步骤 #

• 确认CSS文件路径：确保JordyFont.css放在项目根目录的public/css/文件夹下，这样访问路径/css/JordyFont.css可直接被Strapi的静态资源服务读取。
• 创建自定义Admin入口文件：在项目根目录新建src/admin/app.js文件，写入以下代码（用React生命周期钩子替代不可靠的setTimeout）：

import { useEffect } from 'react';

const CustomAdminApp = ({ children }) => {
  useEffect(() => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = '/css/JordyFont.css';
    document.head.appendChild(link);

    // 组件卸载时移除样式，避免重复加载
    return () => {
      document.head.removeChild(link);
    };
  }, []);

  return children;
};

export default CustomAdminApp;

• 重新构建Admin面板：执行命令重新构建，让自定义代码生效：

npm run build -- --clean
# 若使用yarn则执行：
yarn build --clean

• 验证效果：启动Strapi服务后，打开Admin面板，检查页面head标签中是否已加载你的自定义CSS文件。

补充说明 #

使用useEffect钩子能确保DOM完全加载后再注入样式，比依赖固定延迟的setTimeout更稳定；同时添加组件卸载时的清理逻辑，可避免多次重复加载样式文件。

内容的提问来源于stack exchange，提问作者Bilal Rabbi