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

See the configuration in this page github.com/ghillert/angular2-webpack-starter-bootstrap , you need to add the loaders necessary for those extensions. — Eric Martinez
– Eric Martinez, Commented Mar 3, 2016 at 1:51
Eric, But I specified file loader {test: /\.ttf|eot|svg|woff$/, loader: 'file-loader' } ? Anyway, thanks for the link, I will try later. — Alexander Zhidkov
– Alexander Zhidkov, Commented Mar 3, 2016 at 5:22

hannes neukermans · Accepted Answer · 2016-10-16 08:31:40Z

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

answered Oct 16, 2016 at 8:31

hannes neukermans

13.6k8 gold badges40 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack loading Angular2 Material Design css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related