为什么 WordPress 后端样式在我的本地开发环境中不起作用？

Question

我在一家开发自定义 WordPress 主题的公司担任前端 Web 开发实习生。我的本地开发环境包括 Laravel Valet v2.16.0 和 Webpack v5.52.1 以及 Laravel Mix v6.0.31 作为编译器。目前我们正在开发节点 v12 和 php v7.4。我正在使用 macOS Big Sur v11.6。

自从我开始在这里工作以来，后端样式没有显示在本地开发环境中。对于所有其他员工 (Windows) 和测试版网站，一切都在后端正确显示。控制台或捆绑期间没有错误消息。

一种方法是问题与 CURL 证书有关。我将证书路径添加到我的本地 PHP 配置文件，但这没有用。

这里有一个示例，说明它在本地和在测试版环境中的样子。

本地后端：

测试版后端：

这是我的 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')]
});

如果您还需要什么，请告诉我。

Answer 1

问题是由 postcss-inline-svg 包引起的。我的同事通过执行以下步骤修复了它。

安装postcss-svgo包
将 postcss-svgo 添加到 webpack.mix.js


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

编辑lib/core/Assets.php


    wp_enqueue_style('editor-styles-bundled', get_template_directory_uri() . '/assets/dist/styles/editor-styles.css/styles.css');


    add_editor_style(get_template_directory_uri() . '/assets/dist/styles/editor-styles.css/styles.css');

安装gulp和gulp-postcss包并创建gulpfile.js


    const postcss = require("gulp-postcss");
    const postcssEditorStyles = require("postcss-editor-styles");
    const gulp = require('gulp');
    gulp.task("css", () =>
        gulp
            .src("./assets/dist/styles/styles.css")
            .pipe(postcss([postcssEditorStyles(/* pluginOptions */)]))
            .pipe(gulp.dest("./assets/dist/styles/editor-styles.css"))
    );

现在您可以使用“yarn production && gulp css”来捆绑您的代码。

为什么 WordPress 后端样式在我的本地开发环境中不起作用？

Why are WordPress backend styles not working on my local dev environment?

css

wordpress

webpack

laravel-valet

laravel-mix