Prepending URLs in CSS file with ".." to make them relative paths

[whimsicaldreamer]

I am trying to prepend my URLs in css with .. as the current URL that is being created is something like /assets/images/image1-hash as a result the image doesn't show up on the html page.

The following is my dist folder structure:

Project
|
|__ dist
|     |__ assets
|     |       |__images
|     |             |__ image1-hash
|     |             |__ image2-hash
|     |             |__ image3-hash
|     |
|     |__ css
|     |    |_ index.styles.min.css
|     |    |_ page2.styles.min.css
|     |
|     |__ js
|     |    |_ index.bundle.min.js
|     |    |_ page2.bundle.min.js
|     |
|     |__ index.html
|     |__ page2.html

From #655 I understand that url option can also be a function and I tried implementing that way but the output didn't have the .. prepended. Is it something I am misunderstanding or I am implementing in a wrong way.

Here is the gist to the whole config.

And here is the snippet of my webpack.config.js:

{
                test: /\.css$/,
                use: extractCSS.extract({
                    fallback: "style-loader",
                    use: [
                        {
                            loader: "css-loader",
                            options: {
                                url(url) {
                                    return "../" + url
                                },
                                minimize: true,
                                sourceMap: false
                            }
                        },
                        "postcss-loader"
                    ]
                })
            },