Materialdesign: Loading the resulting css with webpack gives error!

[cawomo]

Hi,

I'm using npm install mdi to install this set of icons which i intend to use with angular 1.x however im running into a loading issue. I work with webpack as a bundler/module loader and when i try to load the css resource [minified or not] webpack throws an error because the file loader cannot resolve the file due to the query params appended for each font type (mdi versioning) =>

@font-face {
  font-family: 'MaterialDesignIcons';
  src: url("../fonts/materialdesignicons-webfont.eot?v=1.0.08");
  src: url("../fonts/materialdesignicons-webfont.eot?#iefix&v=1.0.08") format("embedded-opentype"), url("../fonts/materialdesignicons-webfont.woff2?v=1.0.08") format("woff2"), url("../fonts/materialdesignicons-webfont.woff?v=1.0.08") format("woff"), url("../fonts/materialdesignicons-webfont.ttf?v=1.0.08") format("truetype"), url("../fonts/materialdesignicons-webfont.svg?v=1.0.08#materialdesigniconsregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

my webpack file-loader config:

{
    test: /\.(jpe?g|png|gif|svg|eot|woff|ttf|svg|woff2)$/,
    loader: 'file?name=[name].[ext]'
}

Would really appreciate any help on this.

Thanks!

[Templarian]

https://github.com/gowravshekar/font-awesome-webpack Looking at this you need to include the ?v portion.

Not a webpack users, but that should solve your issue.

[cawomo]

Hi Templarian,

thanks for the response, however I continue to get the same issue. I went through the docs for font-awesome-webpack and try the same regex to load mdi and i get the following:

ERROR in ./~/mdi/fonts/materialdesignicons-webfont.eot?v=1.7.22
Module parse failed: /Users/dan/Projects/clients/PT360PERFORMANCE/pt360/node_modules/mdi/fonts/materialdesignicons-webfont.eot?v=1.7.22 Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)

and so I get unexpected character ' ' for the rest of the webfont formats...

[myagoo]

Same as @cawomo here

[myagoo]

And solved it ! Their loader configuration does not handle more than one digit for major, minor and bugfix version numbers.

Just replace those [0-9] by [0-9]+ and you're done :)

[Templarian]

Awesome, can you paste your solution. I'm sure it would help others to have this documented. :smile:

[myagoo]

module.exports = {
  module: {
    loaders: [
      // the url-loader uses DataUrls.
      // the file-loader emits files.
      { test: /\.woff(2)?(\?v=[0-9]+\.[0-9]+\.[0-9]+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]+\.[0-9]+\.[0-9]+)?$/, loader: "file-loader" }
    ]
  }
};

[josoroma]

thnks @myagoo it works like a charm :)

[simonh1000]

This just worked for me (... more easily than I expected it ever could)

webpack.config

        {
            test: /\.(eot|svg|ttf|woff|woff2)$/,
            loader: 'file-loader?name=[name].[ext]'
        },

index.js

require('style-loader!css-loader!mdi/css/materialdesignicons.css');