@font-face and relative path

Hi community,

I would like use relative path with in my scss file, but webpack return an error in my console :

ERROR in ./~/css-loader!./~/sass-loader!./private/scss/app.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./public/assets/fonts/titillium-web/titillium-web-bold.woff2 in D:\Sites\dcns\private\scss
 @ ./~/css-loader!./~/sass-loader!./private/scss/app.scss 6:5635-5706

My config :

  {
      test: /\.scss$/,
      loaders: ['style', 'css', 'sass']
  },
  {
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      loader: 'file?name=public/fonts/[name].[ext]'
  },
  {
      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
      loader: 'url-loader?limit=100000'
  }

And my scss file :

@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  src:
      url(fonts/titillium-web/titillium-web-light.woff) format('woff'),
      url(fonts/titillium-web/titillium-web-light.woff2) format('woff2');
}

Anyone can help me ?

Thank you !

[jhnns]

Have you read the section about problems with url()? Please also note that the README expects webpack 2.

[MontageD]

You can try this way in the latest webpack . src: font-url(fonts/titillium-web/titillium-web-light.woff) format('woff'), font-url(fonts/titillium-web/titillium-web-light.woff2) format('woff2'); But the premise is if your configuration is well ; as module:{ { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] } }