absolute url question

[zhangolve]

I have a project using webpack and css-loader . In the old days, I use css-loader 0.28,that module can config like below:

```
{
    loader: 'css-loader',
        options: {
            importLoaders: 1,
            root: "static"
        }
}
```

and I have many css files , so when I want to load images ,I can write something like below in css:

    .image-1 {
    background-image: url('/mobile/img/menu-icons/01.png')
    }

actually , the background image path is static/mobile/img/menu-icons/01.png.

But when css-loader upgraded to v1.0.0,it removed root option, and recommanded us using postcss-url,I try to understand your docs But also not fully get it to solve my problem.

I wrote some code in my postcss.config.js file

module.exports = {
  loader: 'postcss-loader',  
  plugins: {
      'postcss-preset-env': {},
      'postcss-url': {
        url: 'rebase',
        from: '/',
        to: 'static',
      }
    }
}

But not work. every time I build finish ,I just found background image path is /mobile/img/menu-icons/01.png ,that is not what I want .

[Nialaren]

+1 Same problem here

Edit: I have manage to make it work with custom url function. @zhangolve your scenario could be:

// postcss.config.js
module.exports = {
        plugins: {
            'postcss-url': {
                url: (asset) => {
                    if (asset.url[0] === '/') {
                        return `static${asset.url}`;
                    }
                    return asset.url;
                }
            }
        }
}

[zhangolve]

@Nialaren let me try your solution. thank you.

[zhangolve]

@Nialaren

I tried your solution and found a better one for me .

First , I copied your code and tried it ,but failed to get these images show. But I now the background image url was actually changed, So the thinking is good.

Then , I changed your code like below:

// postcss.config.js
module.exports = {
        plugins: {
            'postcss-url': {
                url: (asset) => {
                    if (asset.url[0] === '/') {
                        return `/static${asset.url}`;
                    }
                    return asset.url;
                }
            }
        }
}

After I built it, these images can show .But I found url-loader can not work because the background image url was absolute url, can it can not parse it.

I googled some question about how to handle absoulte url with url-loader , like Unable to resolve absolute url() paths for background images in CSS with Webpack , and finally get a better solution:

here is my solution:

// postcss.config.js
module.exports = {
        plugins: {
        'postcss-url': {
         url: asset => {
            if (asset.url[0] === '/') {
                return `~static${asset.url}`;
            }
            return asset.url;
        }
        }
        }
}

of course, before that change, I have added a alias in my webpack.config.js

// webpack.config.js
const STATIC_PATH = path.resolve(__dirname, 'static');
.....
....
return {
        resolve: {
            alias: {
                static: STATIC_PATH,
            }
        }
}

I would close the issue and hope my solution about the question can help others.