Webpack loading Angular2 Material Design css

Question

I'm having problem loading css, containing eot into main scss file. It looks like webpack is not using correct loader for eot file. How to find/ fix this problem?

My webpack.dev.js:

  entry: {
    main: [
      'webpack-dev-server/client?http://localhost:3000',
      './src/main'
    ],
    vendor: [
      'es6-shim',
      'angular2/bundles/angular2-polyfills',
      'angular2/common',
      'angular2/core',
      'angular2/platform/browser',
      'angular2/router',
      'firebase',
      'immutable',
      'rxjs',
      'ng2-material/dist'
    ]
  },

  output: {
    filename: '[name].js',
    path: path.resolve('./target'),
    publicPath: '/'
  },

  resolve: {
    extensions: ['', '.ts', '.js'],
    modulesDirectories: ['node_modules'],
    root: path.resolve('./src')
  },

  module: {
    loaders: [
      {test: /\.html$/, loader: 'raw'},
      {test: /\.scss$/, include: [path.resolve(__dirname, 'src/components')], loader: 'raw!postcss-loader!sass'},
      {test: /\.scss$/, include: [path.resolve(__dirname, 'src/styles')], loader: 'style!css!postcss-loader!sass'},
      {test: /\.ts$/, exclude: [/\.spec\.ts$/, /node_modules/], loader: 'ts'},
      {test: /\.css$/, loader: 'style!css'},
      {test: /\.ttf|eot|svg|woff$/, loader: 'file-loader' }
  ],

I import css in my style.scss file:

@import
"~ng2-material/dist/ng2-material.css",
"~ng2-material/dist/font.css";

And I'm getting this error:

[WDS] Errors while compiling.
client?843a:47./~/ng2-material/dist/MaterialIcons-Regular.eot
Module parse failed: d:\Software Development\Ironing\node_modules\ng2-material\dist\MaterialIcons-Regular.eot 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!./~/ng2-material/dist/font.css 6:133-171

Answer 1

try this inside webpack.config.js:

 {
    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&minetype=application/font-woff"
  }, {
    test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&minetype=application/font-woff"
  }, {
    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&minetype=application/octet-stream"
  }, {
    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
    loader: "file"
  }, {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&minetype=image/svg+xml"
  }