Webpack/WordPress未加载React组件全部SCSS文件问题

问题核心原因 #

• WordPress默认webpack配置里，MiniCSSExtractPlugin处理多个同级组件的CSS导入时，会出现提取路径或资源注册遗漏，尤其是前端viewScript对应的CSS资源没被正确注入页面。
• 编辑器中仅第一个组件CSS能加载，是因为Gutenberg的块编辑器CSS注入机制优先处理第一个关联资源，后续组件的CSS提取后未被正确加入编辑器样式队列。

具体解决步骤 #

1. 统一入口管理CSS导入 #

不要在每个组件里单独导入SCSS，改为在edit.js和client.js这两个入口文件集中导入所有组件样式：

// edit.js 顶部添加
import './CentreWrapper.scss';
import './CentreInformation.scss';

export default function Edit() {
    const blockProps = useBlockProps();

    return (
        <div {...blockProps}>
            <CentreWrapper data={centres}/>
            <CentreInformation data={centres}/>
        </div>
    );
}

// client.js 顶部添加
import './CentreWrapper.scss';
import './CentreInformation.scss';

window.addEventListener("DOMContentLoaded", (event) => {
    const centresWrapper = document.getElementById("centre-wrapper");
    const testWrapper = document.getElementById("centre-information-wrapper");

    if (centresWrapper) {
        render(<CentreWrapper data={centres} />, centresWrapper);
    }

    if (testWrapper) {
        render(<CentreInformation data={centres} />, testWrapper);
    }
});

2. 检查block.json的样式配置 #

确保block.json正确声明编辑器和前端的样式入口，默认webpack会自动关联入口对应的提取CSS：

{
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "viewScript": "file:./client.js"
}

其中style字段对应前端页面需加载的全局样式，webpack会把client.js中导入的CSS提取到style-index.css，再通过WordPress资源加载机制注入前端页面。

3. 为viewScript生成独立CSS文件（可选） #

如果默认配置下viewScript的CSS未被单独提取，可修改webpack配置调整MiniCSSExtractPlugin，为不同入口生成独立CSS文件：

// webpack.config.js 中修改插件配置
new MiniCssExtractPlugin({
  filename: '[name].css',
  chunkFilename: '[id].css',
})

此时client.js对应的CSS会被提取为client.css，再在block.json中添加viewStyle字段：

{
  "viewScript": "file:./client.js",
  "viewStyle": "file:./client.css"
}

4. 验证资源加载状态 #

• 编辑器端：查看页面源码，确认两个组件的CSS是否都注入到wp-editor相关样式标签中。
• 前端页面：查看源码，确认对应样式文件是否通过<link>标签加载。

额外注意事项 #

• 确保所有SCSS文件的相对路径正确，避免webpack解析失败。
• 使用registerBlockType时，不要手动重复注册样式，依赖block.json声明即可，防止冲突。

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