Ошибка при импорте mdi во Vue.js

287

25 июля 2022, 21:30

День добрый. Я только начинаю изучать Vue.js.

Я использую Vuetify для применения встроенных стилей. Теперь я хочу использовать встроенные иконки из пака Material Design Icons, чтобы создать базовую кнопку с изображением:

<v-btn
    class="ma-2"
    color="primary"
    dark>
Accept
<v-icon
        dark
        right
>
    mdi-checkbox-marked-circle
</v-icon>

Поэтому я установил mdi так:

npm install @mdi/font -D

Мой файл main.js:

import Vue from "vue"
import router from "./router";
import App from "./App.vue"
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import vuetify from "./plugins/vuetify"
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
new Vue({
    router,
    vuetify,
    render: h => h(App)
}).$mount('#app')

Я импортирую mdi во Vuetify.js:

import '@mdi/font/css/materialdesignicons.css'

И получаю ошибку при попытке вызвать npm start.

ERROR in ./node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot 1:1
Module parse failed: Unexpected character '�' (1:1)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/@mdi/font/css/materialdesignicons.css (./node_modules/css-loader/dist/cjs.js!./node_modules/@mdi/font/css/materialdesignicons.css) 5:38-89
 @ ./node_modules/@mdi/font/css/materialdesignicons.css
 @ ./src/main/resources/plugins/vuetify.js
 @ ./src/main/resources/main.js

Правила моего webpack.config.js:

{
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use : [
                    'vue-style-loader',
                    'css-loader'
                ]
            }

Можете ли вы помочь мне с этим? Сейчас на странице отображается кнопка со стилем Vuetify, но без самой иконки.

Answer 1

Избавиться от ошибки мне помогло добавление этого правила в webpack.config.js:

{
    test: /\.(ttf|otf|eot|woff|woff2)$/,
    use: {
        loader: "file-loader",
        options: {
            name: "fonts/[name].[ext]",
        },
    },
}

Теперь вьюха нормально компилируется, вот только значки отображаются в виде прямоугольника, буду копать дальше :)