Usage with bootstrap

[rebebop]

Hi,
I'm trying to use webpack with bootstrap using the less-loader. And I'm getting the following error:

Module build failed: Error: Cannot find module "../../bower_components/bootstrap/fonts/glyphicons-halflings-regular.woff2"
    at webpackMissingModule (webpack:///./src/styles/styles.less?./~/css-loader!./~/less-loader:2:4311)
    at Object.eval (webpack:///./src/styles/styles.less?./~/css-loader!./~/less-loader:2:4461)

This is my loader part of the config file:

module: {
    loaders: [
      {test: /\.(js|jsx)$/, loader: 'jsx-loader', exclude: [bowerDir, nodeModulesDir]},
      {test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: [bowerDir, nodeModulesDir]},
      {test: /\.json/, loader: 'json-loader'},
      {test: /\.less$/, loader: ExtractTextPlugin.extract('style', 'css!less')},
      {test: /\.png$/,  loader: "url?limit=10000&mimetype=image/png" },
      {test: /\.woff$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      {test: /\.ttf$/,  loader: "url?limit=10000&mimetype=application/octet-stream" },
      {test: /\.eot$/,  loader: "file" },
      {test: /\.svg$/,  loader: "url?limit=10000&mimetype=image/svg+xml" },

    ]
  },

Posted it in gitter, but I'm guessing it would hard to track there. Any ideas?

[flootr]

You have to extend your loader config a litte. You are only testing for *.woff files, not for *.woff2 files.

Maybe this solves your problem. Change
{test: /\.woff$/, loader: "url?limit=10000&mimetype=application/font-woff" }
to
{ test: /\.(woff|woff2)$/, loader: "url?limit=10000&minetype=application/font-woff" }

[rebebop]

@flootr you were right, that did help. However I'm getting the following error now:

ERROR in ./src/assets/fonts/icomoon.woff?-s4hnkc
    Module parse failed: /Users/razagill/Development/Workspace_Touchpoint/server/www/webapps/tpp-admin/src/assets/fonts/icomoon.woff?-s4hnkc Line 1: Unexpected token ILLEGAL
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader!./~/less-loader!./src/styles/styles.less 2:221905-221952

I'm guessing it's because I'm using icomoon and the loader isn't getting the file because it has a string after that e.g. "?-s4hnkc". Here is my icon.less file and it's the only one that's messing things up:

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

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-heart:before {
  content: "\e600";
}

[flootr]

You may need an appropriate loader to handle this file type.

Did you install the appropriate loaders via npm?

You may tweak your RegExp and leave out the $ at the end of your test to get it working. Like so:
{ test: /\.(woff|woff2)/, loaders [...]

$ matches the end of a line, but there are still more characters to follow.

[jhnns]

Yep, the error is saying that your loader wasn't applied. @flootr 's suggestion is correct.

[nmccready]

Did anyone ever get this working?

[nmccready]

Ok I think I got it working.

This is the only way it would work,
{ test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" }

Bombs on :

• { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000&mimetype=application/font-woff" }
• { test: /\.woff2$/, loader:"url?prefix=font/&limit=5000&mimetype=application/font-woff2" }

[jeffbmartinez]

The regexes listed for font-awesome-webpack (https://www.npmjs.com/package/font-awesome-webpack) worked well for me:

webpack.config.js:

...
loaders: [
    ...
    { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
    { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
    ...
],
...

Also need to install the loaders, which might trip up people newer to webpack:

npm install file-loader --save-dev
npm install url-loader --save-dev

[dfreyche]

Thanks @jeffbmartinez

Worked fine for me the loaders url and file,

Used this configuration rules for webpack 2 in addition to less-loader

...
rules: [
...
{ test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /.(ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/, loader: "file-loader" },
...
],
...

[jhnns]

Closing this since it is not related to the less-loader anymore.