javascript - Webpack, trouble loading local fonts -

i having issues loading local fonts when using webpack. have host few of own fonts have folder in /client/fonts fonts.

right now, loading them production web pack build && cp -r ./client/fonts dist/ in npm script build process. trying see if file-loader me not have rely on cp.

after bit of googling, tried see if use filer-loader needs (in webpack production build) -

  ,{       test: /\.(otf|eot|svg|ttf|woff|woff2)$/,       loader: 'file-loader',       query: {         outputpath: 'fonts/'       }     } 

however, when run build task see no fonts imported. not sure doing wrong here. reference webpack entry/output :

  entry: {     js: [         path.join(__dirname, 'client/app.jsx')     ],     vendor: [       'react',       'react-dom',       'lodash',       'react-redux',       'redux'     ] }, output: {     path: path.join(__dirname, '/dist/'),     filename: 'bundle.min.js',     publicpath: '/' }, 

and css (scss), using loader -

    ,{         test: /\.scss$/,         loader: extracttextplugin.extract('style', 'css!postcss!sass')     }, 

and imported in base.scss have _fonts.scss , right looks :

  // custom fonts @font-face {   font-family: 'sharpgroteskbook25';   src: url('/fonts/sharpgrotesk/sharpgroteskbook25.eot');   src: url('/fonts/sharpgrotesk/sharpgroteskbook25.eot?#iefix') format('embedded-opentype'),   url('/fonts/sharpgrotesk/sharpgroteskbook25.woff') format('woff'),   url('/fonts/sharpgrotesk/sharpgroteskbook25.ttf') format('truetype'),   url('/fonts/sharpgrotesk/sharpgroteskbook25.svg#sharpgroteskbook25') format('svg');   font-weight: normal;   font-style: normal; } 

i not sure doing wrong here fonts load on prod server. when @ live server not seeing fonts being loaded in prod task (getting failed decode downloaded font error). idea how resolve issue? prefer webpack load using cp command. thanks!

the css-loader, handles imports , url, not translate urls start /, therefore file-loader won't applied either.

the solution use relative paths imports if want them processed webpack. note css has no special syntax relative imports following equivalent:

url('fonts/sharpgrotesk/sharpgroteskbook25.eot') url('./fonts/sharpgrotesk/sharpgroteskbook25.eot') 

if want them resolved module, webpack offers possibility start import path ~, shown in css-loader readme.