Webpack Wordpress 背景图片相对路径

Question

我使用 webpack 3 构建了我的 wordpress 主题。一切正常，但我的 sass 构建只写入了缩小的 css 文件的相对路径：

.selector { background-image: url(/img/layout/bg-contact.jpg); }

我需要以下路径：

.selector { background-image: url(wp-content/themes/themename/img/layout/bg-contact.jpg); }

我的 webpack.config.js 的相关部分：

module.exports = {

    entry: {
        app: [
            bootstrapConfig,
            './resources/assets/scripts/main.js'
        ]
    },

    output: {
        path: path.resolve(__dirname, 'wp-content/themes/themename'),
        // path: path.resolve(__dirname, 'themename'),
        filename: 'assets/main.min.js',
        publicPath: '/'
    },

    module: {
        rules: [

            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader'
                }
            },


            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [
                    'file-loader?name=img/[folder]/[name].[ext]',
                    'image-webpack-loader'
                ]
            },

            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader: "css-loader",
                            options: {
                                sourceMap: true,
                                minimize: true,
                                modules: true,
                                importLoaders: 1
                            }
                        },
                        {
                            loader: "postcss-loader",
                            options: {
                                sourceMap: true,
                                path: './postcss.config.js'
                            }
                        },
                        {
                            loader: "sass-loader",
                            options: {
                                sourceMap: true,
                                includePaths: [dirAssets]
                            }
                        }
                    ],

                    fallback: "style-loader",
                    publicPath: './'
                })
            },

            {
                test:/bootstrap-sass[\/\\]assets[\/\\]/,
                use: [
                    {
                        loader: 'imports-loader'
                    }
                ]
            },
            {
                test: /\.[ot]tf$/,
                loader: 'url-loader',
                options: {
                    limit: 50000,
                    mimetype: 'application/octet-stream',
                    name: './fonts/[name].[ext]',
                    publicPath: './'
                }
            },

            {
                test: /\.eot$/,
                loader: 'url-loader',
                options: {
                    limit: 50000,
                    mimetype: 'application/vnd.ms-fontobject',
                    name: './fonts/[name].[ext]',
                    publicPath: './'
                }
            },

            {
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader',
                options: {
                    limit: 50000,
                    mimetype: 'application/font-woff',
                    name: './fonts/[name].[ext]',
                    publicPath: './'
                }
            }

        ]
    },

    resolve: {
        modules: [
            dirNode,
            dirAssets,
            path.join(__dirname, "resources")
        ],
        extensions: ['.js', '.json', '.html', '.php', '.scss', '.css']
       
    },

    plugins: [

        [ ... ]
        new ExtractTextPlugin({
            filename: "assets/main.min.css",
            allChunks: true
        }),

        [ ... ]
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            Tether: "tether",
            "window.Tether": "tether"
           
        })

    ]
};

如何解决我的背景图像在 main.min.css 中的“/img/layout/bg-contact.jpg”之前作为路径“wp-content/themes/themename”？

Answer 1

我也遇到了通过节点 gulp 运行的 SCSS 文件的问题，我最终为活动主题编写了重写规则。

创建一个新文件rewrite_rule.php，然后将其包含在functions.php 中，然后重新保存永久链接

rewrite_rule.php

class NA_REWRITE {
    public function __construct() {
        add_action('init', array($this, 'flush_rewrite_rules'));
        add_action('generate_rewrite_rules', array($this, 'assets_add_rewrites'));
    }
    public function assets_add_rewrites($wp_rewrite) {
        $path = str_replace(home_url('/'), '', get_template_directory_uri());
        $wp_rewrite->non_wp_rules += array(
            'img/layout/(.*)'      => $path . '/img/layout/$1',
            //'assets/css/(.*)'      => $path . '/assets/css/$1',
        );
    }
    public function flush_rewrite_rules() {
        global $wp_rewrite;
        $wp_rewrite->flush_rules();
    }
}

function.php

include_once 'rewrite_rule.php';
add_action('init', 'init_theme');
function init_theme() {
    new NA_REWRITE();
}