為什么WordPress后端樣式在我的本地開發環境中不起作用？

我在一家開發自定義 WordPress 主題的公司擔任前端 Web 開發實習生。我的本地開發環境由 Laravel Valet v2.16.0 和 Webpack v5.52.1 以及 Laravel Mix v6.0.31 作為編譯器組成。目前我們正在使用 node v12 和 php v7.4 進行開發。我正在開發 macOS Big Sur v11.6。

自從我開始在這里作業以來，后端樣式不會顯示在本地開發環境中。對于所有其他員工 (Windows) 和測驗版網站，一切都在后端正確顯示。控制臺中或捆綁期間沒有錯誤訊息。

一種方法是問題與 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')]
});

需要幫助請叫我。

uj5u.com熱心網友回復：

問題是由 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”來捆綁您的代碼。

標籤：css WordPress的 网络包 laravel-mix laravel-代客

上一篇：在WebPack中添加自定義Js并通過MVCHTMLhelper使用它

下一篇：將字典寫入檔案，從檔案中檢索字典