Webpack加載Angular2材質設計CSS

Question

我在加載包含EOT的CSS到主scss文件時遇到問題。 似乎webpack沒有為eot文件使用正確的加載器。 如何查找/解決此問題？

我的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' }
  ],

我在我的style.scss文件中導入CSS：

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

我收到此錯誤：

[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

在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"
  }