Vuetify의 Icons를 사용하려고하면 Module parse failed : Unexpected character로 나왔다.

3958 단어 Vue.jsVuetify
Vue에서 Vuetify를 채용하려고 하고, node-module 로 라이브러리를 인스톨 후 사용하려고 하면, 에러가 나왔으므로 비망록으로서.

사건



Vuetify에서 아이콘을 사용하려고하면 다음 오류가 발생했습니다.
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

좋은 웹페이지 즐겨찾기