1

In webpack.config.js there is a configuration to bundle stylesheets (scss) and fonts

{
  use: [{
    loader: 'style-loader'
  },
  {
    loader: 'css-loader',
    options: {
      sourceMap: true
    }
  },
  {
    loader: 'sass-loader',
    options: {
      sourceMap: true
    }
  }],
  test: /\.scss$/
},
{
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  use: [{
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      outputPath: './fonts/'
    }
  }]
}

a stylesheet (styles.scss) use this font-face

@font-face {
  font-family: "Frutiger Roman";
  src: url("fonts/frutiger/FrutigerLTStd-Roman.eot");
  src: url("fonts/frutiger/FrutigerLTStd-Roman.eot?#iefix") format("embedded-opentype"), url("fonts/frutiger/FrutigerLTStd-Roman.woff") format("woff"), url("fonts/frutiger/FrutigerLTStd-Roman.ttf") format("truetype"), url("fonts/frutiger/FrutigerLTStd-Roman.svg#Frutiger Roman") format("svg");
  font-style: normal;
  font-weight: 400;
}

The output from the webpack is a main.js file

output: {
   filename: 'main.js',
   path: path.resolve(__dirname, 'dist')
}

When I access main.js from root, example http://localhost:8080/, the font is loaded correct, from http://localhost:8080/fonts/FrutigerLTStd-Light.woff But when I access from a sub directory, example http://localhost:8080/apps, the font is loaded from http://localhost:8080/apps/fonts/FrutigerLTStd-Light.woff but it does not exists. Is there any way to force all fonts to be loaded from root (/)?

Christian Benseler
  • 7,907
  • 8
  • 40
  • 71

1 Answers1

2

refer to this, this exact problem seems to be one chapter in their documentation: https://github.com/webpack-contrib/sass-loader#problems-with-url

Lukáš Gibo Vaic
  • 3,960
  • 1
  • 18
  • 30
  • BTW, any clues how to solve `resolve-url-loader: error processing CSS a valid source-map is not present`? https://stackoverflow.com/questions/68366936/how-to-bundle-katex-css-to-a-single-output-css-with-webpack – Ciro Santilli OurBigBook.com Jul 13 '21 at 17:31