Gutenberg区块插件样式加载404问题求助（开发正常 staging异常）

1. 检查打包脚本配置，确保CSS文件被纳入构建流程 #

自定义CSS未出现在build目录，核心原因是打包工具未识别并处理该文件：

• 如果你使用官方@wordpress/scripts工具，默认只会打包入口文件（通常是src/index.js）关联的资源。需在src/index.js中导入目标CSS文件：

  import './plugin-gallery.css';
  

• 若自定义了webpack.config.js，需确认配置规则包含对独立CSS文件的处理，确保打包时将其输出到build目录。

2. 修正样式注册的路径与钩子挂载错误 #

你的PHP代码存在两处关键问题：

• 路径错误：开发环境指向src目录可行，但生产部署时src目录通常不会被包含在插件包内，需改为指向build目录的打包后文件。
• 钩子挂载位置错误：add_action被放在函数内部，导致样式注册逻辑从未被触发。

修正后的代码：

function plugin_gallery_block(){
    wp_enqueue_style(
        'plugin-gallery-css',
        plugins_url( '/build/plugin-gallery.css', __FILE__ )
    );
}
add_action( 'wp_enqueue_scripts', 'plugin_gallery_block' );

（注：无需重复调用wp_register_style，直接使用wp_enqueue_style即可完成注册与入队）

3. 调整block.json的样式配置 #

若依赖block.json加载样式，需确保路径指向打包后的文件：

• 若使用file:前缀，路径需相对于block.json的位置。假设block.json在插件根目录，配置应改为：

  "style": ["file:./style-index.css", "file:./build/plugin-gallery.css"]
  

• 若使用注册的样式句柄plugin-gallery-css，需确保PHP端的注册逻辑已正确修正（见第2点）。

4. 验证打包后的插件包内容 #

解压部署用的zip包，确认：

• build目录存在且包含plugin-gallery.css
• 未因.gitignore或打包脚本的排除规则，导致build目录或CSS文件被遗漏

5. 检查站点文件权限与缓存 #

• 确认预发布站点中build目录权限为755，CSS文件权限为644，权限不足会导致服务器返回404。
• 清理WordPress页面缓存、浏览器缓存及CDN缓存（如Cloudflare），避免旧路径缓存引发的404。

内容的提问来源于stack exchange，提问作者Joel Cormack