postcss.config.js

import postcssUrl from 'postcss-url';
import autoprefixer from 'autoprefixer';

const BASE_HREF = '';
const DEPLOY_URL = '';

export default () => {
    return [
        postcssUrl({
            url: ({ url }) => {
                // Only convert root relative URLs, which CSS-Loader won't process into require().
                if (!url.startsWith('/') || url.startsWith('//')) {
                    return url.replace(/\/\/+/g, '/');
                }
                if (DEPLOY_URL.match(/:\/\//)) {
                    // If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
                    console.log('1', `${DEPLOY_URL.replace(/\/$/, '')}${url}`);
                    return `${DEPLOY_URL.replace(/\/$/, '')}${url}`;
                } else if (BASE_HREF.match(/:\/\//)) {
                    console.log('2', BASE_HREF.replace(/\/$/, '') + `/${DEPLOY_URL}/${url}`.replace(/\/\/+/g, '/'));
                    // If baseHref contains a scheme, include it as is.
                    return BASE_HREF.replace(/\/$/, '') + `/${DEPLOY_URL}/${url}`.replace(/\/\/+/g, '/');
                } else {
                    // Join together base-href, deploy-url and the original URL.
                    // Also dedupe multiple slashes into single ones.
                    console.log('3', `/${BASE_HREF}/${DEPLOY_URL}/${url}`.replace(/\/\/+/g, '/'));
                    return `/${BASE_HREF}/${DEPLOY_URL}/${url}`.replace(/\/\/+/g, '/');
                }
            },
        }),
        autoprefixer(),
    ];
};