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();
    }
}

功能.php

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