Alexander Zhidkov Alexander Zhidkov - 1 month ago 41
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?

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

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