Webpack Wordpress background-image relative path

Question

i build my wordpress theme with webpack 3. Everything works fine, but my sass build write only the relative path to the minified css file:

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

I need following path:

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

The relevant parts of my 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"
           
        })

    ]
};

How i can fix it that my background-image get as path 'wp-content/themes/themename' before '/img/layout/bg-contact.jpg' in my main.min.css?

Noman Noman · Accepted Answer · 2018-03-12T11:24:46

i was also getting this problem with SCSS files running through node gulp i ended up writing my rewrite rules for active theme.

Create a new file rewrite_rule.php and then include it in functions.php, and re-save the permalinks

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

Webpack Wordpress background-image relative path

1 Answers