v4 tries to resolve the absolute urls in css files and gets an error.

[syberon]

I have this rules in my css file:

.swiper-button-prev {
    background-image: url('/img/slider-arrow-left.png');
}

/img/slider-arrow-left.png is located at site root (public_html directory) and not to be resolved.

In version before v4 it works perfectly and not try to resolve the url because it absolute, but after updating to v4 i get an error
Error: Can't resolve '/img/slider-arrow-right.png' in 'C:\SERVER\projects\laminas\mt4\frontend\src\css' because css-loader tries to resolve it in frontend src directory.

my weback config to parse css:

            {
                test: /\.(css)$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ]
            },
            {
                test: /\.(scss)$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sassOptions: {
                                sourceMapRoot: '/'
                            }
                        },
                    },
                ]
            },

[alexander-akait]

It is expected and it is breaking change, /img/slider-arrow-left.png can mean:

• Server relative URLs
• Absolute URLs

Try to open this in browser and you will got same problem. You need refactor your code, if you can't do it (vendor code), you can use resolve.alias https://webpack.js.org/configuration/resolve/#resolvealias

[alexander-akait]

Do not ignore the issue template, otherwise I will close without answer

[petertenhoor]

Same issue after updating to css-loader from version 3.6 to 4.1. Webpack is no longer able to resolve paths in my SCSS like '/fonts/font-awesome/fontawesome-webfont.eot?v=4.7.0'.

@evilebottnawi Do you have an example of how to fix this using a resolve alias?

[syberon]

I found the way to fix it using resolve alias, but this is a not a convenient way. I want to store all my images (that used in project html templates and in css/scss stylesheets) in one public path (public_html/img) but V4 doesn't allow this anymore and i compelled to store my images in 2 different directories - one for direct access (public_html/img) and one in frontend source dir for compile css stylesheets. Another inconvenience is that i can't replace this files in public dir without recompiling whole project (by simple replacing images in production server public dir).

I really do not understand what caused the need for this breaking change. Why couldn't you make a way to enable/disable root relative url resolution by some config param?

Now i have to use inconvenient way of images store. For now i decided to downgrade to V3 because V4 is unusable with this "improvement".

@petertenhoor this workaround works (change path for you way) if you want to follow the new way of using:

resolve: {
    alias: {
      '/fonts': path.resolve(__dirname, '../public_htlm/fonts/'),
    }
  }

After this change webpack copies all resource files that found in this url to dist/assets (or another that you set in config) on every recompilation. This is not big deal in frontend only applications there all resources you can store in source dir and compiler every time copies it in dist folder. But my project (big CMS with templatest generated by php backend) not allowing this.

[alexander-akait]

@syberon The main problem is that you used the wrong approach for storing assets and got a problem, most likely this approach does not work anywhere. Try to use /fonts/font.woff2 in browser, what you will got?

For now i decided to downgrade to V3 because V4 is unusable with this "improvement".

I am ready to disappoint you, in the near future you will have to update, because style-loader and mini-css-extract-plugin will not work with css-loader@3.

Everyone who got this error is time to review the structure of assets and fix it.

/font/font.woff2 never was and never can be ./font/font.woff2, please read spec about URL resolving in CSS