Wrong URL in output CSS files

[cichy380]

I try to resolve problem with loading font files.

Part of my project files structure:

- /assets
  |- /fonts
     |- /FontName
        |- FontName.eot
  |- /scss
     |- main.scss
     |- /base
        |- _fonts.scss
        |- ...
     |- ...
  |- ...

main.scss

@import "./base/fonts";
// ...

_fonts.scss

@font-face {
  font-family: "FontName";
  src: url("../../fonts/FontName/FontName.eot");
  // ...
}

webpack.config.js

...
{
        test: /\.(css|sass|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              sourceMap: true
            }
          },
          {
            loader: 'resolve-url-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require('autoprefixer')
              ],
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          },
        ],
        exclude: /node_modules/,
      },
      { // this loader works fine, and files are copied from /assets folder to /dist folder
        test: /\.(woff(2)?|ttf|eot)(\?[a-z0-9=.]+)?$/,
        loader: 'file-loader',
        options: {
          outputPath: 'fonts',
          name: '[name].[ext]',
        },
        exclude: /node_modules/,
      },
...

I expect in output CSS file:

@font-face {
  font-family: "FontName";
  src: url(../fonts/FontName.eot);
...

...but I got:

@font-face {
  font-family: "FontName";
  src: url(fonts/FontName.eot);
...

and browser looks for font file in: http://localhost/css/fonts/FontName.woff

[bholloway]

If webpack finds the assets without error then it is working correctly.

The css loader will identify assets. But The actual output path for assets is based on the loader for the asset files. Which is not shown.

Presuming you are using file loader or similar then there should be output options there.

Webpack will rewrite all the URL in the css loader as required.

[cichy380]

Yes, webpack finds the assets and /dist folder structure looks good:

 - /dist
   |- index.html
   |- /fonts
      |- FontName.eot
   |- /css
      |- styles.css
 ...

but I need to correct URL in output CSS files: http://localhost/fonts/FontName.woff

How can I configure it? Maybe in resolve-url-loader options?

PS Output CSS filename is defined in plugins of webpack.config.js:

...  
  plugins: [
    new MiniCssExtractPlugin({
      filename: './css/styles.css'
    }),
   ...
  ]
...

[bholloway]

output.publicPath: “/“

That will give you root relative URL to assets.

[bholloway]

To be clear, nothing in the css loader chain can effect the asset output path when webpack is aware of the assets.

So resolve-url-loader is not helping in that respect.

[cichy380]

Works! Thanks for help