首先确认 pfctl 防火墙是否启用，检查规则是否阻止了端口 80 或 443 的流量；接着修改 /etc/pf.conf 文件，添加允许出站访问 http/https 的规则；然后重新加载规则使配置生效；最后可通过临时禁用防火墙验证问题是否由 pfctl 导致，并重新启用以应用修正后的规则。
如果您在 macOS 上使用 pfctl 配置防火墙后发现某些网页的 CSS 文件无法正常加载，尤其是通过外部链接引入的样式表被拦截，这可能是由于防火墙规则限制了出站或入站网络请求。以下是解决此问题的具体步骤：
一、确认 pfctl 防火墙当前状态
了解当前防火墙是否启用以及加载了哪些规则文件，是排查网络阻断问题的第一步。通过检查运行状态可以判断是否真的由 pfctl 导致资源加载失败。
1、打开终端应用程序，输入以下命令查看防火墙是否启用：
sudo pfctl -s info
2、如果显示 "Status: Enabled"，则说明防火墙正在运行。
3、执行以下命令查看当前加载的过滤规则：
sudo pfctl -s rules
4、检查输出中是否存在阻止 HTTP（端口 80）或 HTTPS（端口 443）流量的规则。
二、修改 pf 配置文件放行 Web 资源请求
macOS 的 pfctl 防火墙依赖于配置文件（通常是 /etc/pf.conf）来定义允许或拒绝的数据流。需要在此文件中添加明确允许对外部域名或 IP 的出站连接，以确保 CSS 等静态资源可被加载。
1、使用文本编辑器打开 pf 配置文件：
sudo nano /etc/pf.conf
2、在规则部分添加如下语句，允许本地设备发起对外部 Web 服务器的请求：
pass out quick on en0 proto tcp from any to any port {80, 443} keep state
3、若需针对特定 CDN 域名放行，可先通过浏览器开发者工具获取其 IP 地址，并添加类似规则：
pass out quick on en0 inet proto tcp from any to 目标IP地址 port {80, 443} keep state
4、保存并退出编辑器（nano 中按 Ctrl+O 回车，再按 Ctrl+X）。
三、重新加载 pfctl 防火墙规则
修改配置文件后必须重新加载规则才能生效。此过程不会中断现有连接，但会应用新的访问控制策略。
1、执行以下命令重新加载防火墙规则：
sudo pfctl -f /etc/pf.conf
2、再次运行 sudo pfctl -s rules 检查新规则是否已载入。
3、刷新浏览器页面，测试外部 CSS 是否成功加载。
四、临时禁用 pfctl 进行故障排除
若不确定具体哪条规则导致阻塞，可临时关闭防火墙验证是否为 pfctl 所致，从而缩小问题范围。
1、在终端中执行以下命令关闭防火墙：
sudo pfctl -d
2、此时所有数据包将不再受 pf 规则限制。
3、刷新网页，观察外部 CSS 是否恢复正常加载。
4、若问题消失，则确认为 pf 规则所致，应返回第二步调整规则内容。
5、完成测试后重新启用防火墙：
sudo pfctl -e
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
