WordPress区块插件中无法加载后台样式的解决咨询

以下是几种可行的解决方案，根据你的项目构建工具选择对应方法：

方法1：通过JS导入CSS（适配WordPress官方@wordpress/scripts） #

如果你的项目使用WordPress官方的@wordpress/scripts构建工具，最规范的做法是在后台入口JS文件中导入CSS，工具会自动将CSS打包到build目录：

1. 在你的后台JS文件（比如src/js/admin.js）中添加CSS导入语句：

// src/js/admin.js
import '../styles/admin.css';

2. 确保package.json中的构建脚本指向该JS文件（如果还没配置）：

"scripts": {
  "start": "wp-scripts start src/js/admin.js",
  "build": "wp-scripts build src/js/admin.js"
}

3. 修改PHP的样式注册代码，改为加载构建后的资源：

function enqueue_neatwp_admin_styles() {
    // 加载JS，关联的CSS会被自动加载
    wp_enqueue_script( 'plugin-admin-script', plugin_dir_url( __FILE__ ) . 'build/admin.js', array(), '1.0.0', true );
    // 也可直接加载提取后的独立CSS文件
    wp_enqueue_style( 'plugin-admin-style', plugin_dir_url( __FILE__ ) . 'build/admin.css', array(), '1.0.0' );
}
add_action( 'admin_enqueue_scripts', 'enqueue_neatwp_admin_styles' );

方法2：使用Webpack插件自动复制CSS文件 #

如果需要保持CSS文件独立，可通过copy-webpack-plugin在构建时自动将src目录的CSS复制到build目录：

1. 安装插件：

npm install copy-webpack-plugin --save-dev

2. 创建或修改项目根目录的webpack.config.js，添加复制规则：

const CopyPlugin = require('copy-webpack-plugin');
const defaultConfig = require('@wordpress/scripts/config/webpack.config');

module.exports = {
    ...defaultConfig,
    plugins: [
        ...defaultConfig.plugins,
        new CopyPlugin({
            patterns: [
                { from: 'src/styles', to: 'build/styles' },
            ],
        }),
    ],
};

3. 运行npm run start或npm run build，src/styles下的文件会自动同步到build/styles目录，你的原有PHP注册代码无需修改。

方法3：添加Shell脚本手动复制CSS #

如果不想修改Webpack配置，可通过命令行工具实现文件复制：

1. 安装跨平台文件复制工具cpy-cli：

npm install cpy-cli --save-dev

2. 修改package.json中的脚本，在构建/开发命令后追加复制操作：

"scripts": {
  "start": "wp-scripts start & cpy src/styles/** build/styles --watch",
  "build": "wp-scripts build && cpy src/styles/** build/styles"
}

• --watch参数会在开发模式下实时监听src/styles的文件变化，自动同步到build目录
• 原有PHP注册代码保持不变即可正常加载样式

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