Alexander Zhidkov Alexander Zhidkov - 1 year ago 387
Sass (Sass) Question

Webpack loading Angular2 Material Design css

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?


entry: {
main: [
vendor: [

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:


And I'm getting this error:

[WDS] Errors while compiling.
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 Source

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"
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download