macOS下Laravel Valet环境WordPress后台样式失效问题求助

我是定制WordPress主题开发公司的前端开发实习生，本地开发环境配置如下：

• 本地运行环境：Laravel Valet v2.16.0
• 编译工具：Webpack v5.52.1 + Laravel Mix v6.0.31
• 依赖版本：node v12、PHP v7.4
• 操作系统：macOS Big Sur v11.6

入职以来本地开发环境的WordPress后台样式始终无法正常显示，Windows系统同事的本地环境、线上beta站点的后台样式均正常，浏览器控制台、代码打包流程均无报错输出。
此前怀疑问题与CURL证书有关，在本地PHP配置文件中添加了对应证书路径后问题仍未解决。

后台显示效果对比 #

本地后台显示效果 #

beta环境后台显示效果 #

webpack.mix.js 配置内容 #

const mix = require('laravel-mix');

const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');

require('laravel-mix-versionhash');

// env support
const dotenv = require('dotenv').config({ path: process.env.PWD + '/.env.bundler' })

const path = require('path');
const homedir = require('os').homedir();

const protocol = !!dotenv.parsed.PROTOCOL ? dotenv.parsed.PROTOCOL : 'http://';
const domain = !!dotenv.parsed.DOMAIN ? dotenv.parsed.DOMAIN : 'localhost';

let browserSyncArguments = {
    proxy: protocol + domain,
    host: domain,
    ui: false,
    open: false,
    reloadDelay: 500,
    files: [
        'assets/src/**/*',
        'views/**/*',
        'lib/**/*',
    ],
};

if (protocol === 'https://') {
    browserSyncArguments = {
        ...browserSyncArguments,
        ...{
            https: {
                key: homedir + '/.localhost-ssl/' + domain + '.key',
                cert: homedir + '/.localhost-ssl/' + domain + '.crt',
            }
        }
    }
}

mix.setPublicPath('./assets/dist')
    .browserSync(browserSyncArguments);

// WebPack config overwrite
mix.webpackConfig({
    plugins: [
        // Clean unused/old files
        new CleanWebpackPlugin(),
    ],
    module: {
        rules: [{
            test: /\.(sa|sc|c)ss$/,
            use: [
                // Reads Sass vars from files or inlined in the options property
                {
                    loader: "@epegzz/sass-vars-loader",
                    options: {
                        syntax: 'scss',
                        files: [
                            // Option 2) Load vars from JSON file
                            path.resolve(__dirname, 'lib/Config/global.json')
                        ]
                    }
                }
            ]
        }
        ]
    }
});


// copy images folder to dist, use copyWatched for support in watch mode
mix.copy('assets/src/images/**', 'assets/dist/images')
    .copy('assets/src/fonts/**', 'assets/dist/fonts');

// JS build process
mix.js('assets/src/scripts/main.js', 'scripts/scripts.js').js('assets/src/scripts/blocks.js', 'scripts/blocks.js').react().extract();


// CSS build process (includes fonts)
mix.sass('assets/src/styles/main.scss', 'styles/styles.css');

// add versionHash to files only on prod - breaks watcher (ex. 'styles_8d0b9038.css')
if (mix.inProduction()) {
    mix.versionHash({
        length: 8,
        delimiter: '_'
    });
} else {
    // add sourceMaps
    mix.sourceMaps(false, 'source-map');
}

mix.options({
    processCssUrls: false,
    postCss: [require('postcss-inline-svg')]
});

1. 校验后台样式资源加载状态 #

打开WordPress后台页面，按F12打开开发者工具切换到网络面板，筛选CSS资源，检查WordPress核心自带的后台样式文件（如load-styles.php返回的内容、wp-admin/css目录下的核心样式）是否加载成功、响应状态码是否为200，响应内容是否为空或者被篡改。
你提供的Laravel Mix配置仅处理主题自定义的静态资源，不会影响WordPress核心的后台样式，优先排查核心样式加载问题。

2. 检查Valet站点域名与WordPress站点配置匹配度 #

打开WordPress根目录下的wp-config.php，检查WP_HOME、WP_SITEURL两个配置项的域名、协议（http/https）是否和你本地Valet绑定的访问域名完全一致，如果不一致会导致样式资源跨域或者加载路径错误。
同时检查主题中是否通过wp_enqueue_style方法注册样式时硬编码了域名，导致本地环境加载了无效资源路径。

3. 校验本地文件权限 #

macOS下Valet站点对应的目录权限错误会导致静态资源无法被正常读取，执行以下命令修复站点目录权限：

# 替换为你的站点根目录路径
sudo chown -R _www:_www /path/to/your/site/root
sudo chmod -R 755 /path/to/your/site/root

4. 排查Valet的Nginx配置异常 #

执行valet restart重启Valet服务，如果问题仍存在，执行valet uninstall后重新安装Valet，重置所有默认Nginx配置，避免原有配置规则拦截了WordPress后台样式请求。

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