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