Webpack url fix plugin?

Question

JavaScript

Hello everyone ! I would be grateful if you can help in solving such a problem:
0) We have the following file structure:

+ dist/
--- loadable/
--- bundle.css
--- bundle.js
+ src
--- loadable/
...

1) There are .scss files that contain paths, for example:

font-face {
  font-family: Font1;
  src: url('../../loadable/fonts/52452.otf');
}

2) There is such a webpack-config:

{
            test: /\.(sass|scss)$/,
            include: path.resolve(__dirname, 'src'),
            use: ExtractTextPlugin.extract({
                use: [{
                    loader: "css-loader",
                    options: {
                        sourceMap: true,
                        minimize: true,
                        url: false
                    }
                }, {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true
                    }
                }]
            })
        }

3) All .scss files are successfully assembled into a bundle, but only the paths are simply copied from the sources, i.e. the bundle says the same:

font-face {
  font-family: Font1;
  src: url('../../loadable/fonts/52452.otf');
}

And it should be:

font-face {
  font-family: Font1;
  src: url('loadable/fonts/52452.otf');
}

How to solve this problem? What plugin to use?
Tried resolve-url-loader but it looks like it's not for that

Answer 1

Your css-loader options are set url: falseto , so it doesn't process constructs url('../*/font.otf')in styles and leaves them as they are. Uncheck this option, then css-loader will try to resolve the specified resources as if you imported them from JS. Most likely Webpack will complain because it doesn't know how to handle these types of files; so as not to swear, specify in the config file-loader or url-loader for fonts and other locally connected files.