VueでVuetifyを採用しようと思い、node-moduleでライブラリをインストール後使おうとしたら、エラーが出たので備忘録として。

事象

VuetifyでIconsを使おうとしたら、以下エラーに至った。

ERROR in ./node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

解決策

以下のように書き換える。

webpack.config.js

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

無事アイコンも表示された。

経緯

Vuetifyをインストール後、公式に従い以下を実行。

npm install material-design-icons-iconfont -D
npm install @mdi/font -D

私の環境では、style.scssにまとめているので、main.jsはこれだけ。

main.js

import './scss/style.scss';
import Vue from 'vue'
~~

Vue.use(Vuetify, {
	iconfont: 'mdi'
});

./scss/style.scss

@import "../../node_modules/vuetify/dist/vuetify.min.css";
@import "../../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";
@import "../../node_modules/@mdi/font/css/materialdesignicons.css";

これで、npm run devをしたら先ほどのエラーが発生した。

ERROR in ./node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

参考

Vuetify公式
 Why does module parse failed: /xxx/MyFont.ttf Unexpected character '' - StackOverFlow