Cannot resolve @fontawesome all / fontawesome-free

Question

I am using vue.js 2 - I add some mdi-icons in my App.vue this generate a new error in my project
When I was trying to serve my Project but I got the error as it given as below

I apply also some commands on it but it not solved my error. Can anyone help me to solve it

Answer 1

I simply solve the error by uninstall the googlefonts then again reinstall the google fonts by using following command.In my case I am using yarn so I use

yarn add @fortawesome/fontawesome-free

But in case of user that are using npm they should use following command

npm install --save @fortawesome/fontawesome-free

Also the following link is helpful google solve links for Npm and Yarn

: https://www.google.com/search?q=font%20awesome%20add%20by%20yaRN&oq=font%20awesome%20add%20by%20yaRN&aqs=chrome..69i57j33i10i160.11903j0j7&sourceid=chrome&ie=UTF-8

Answer 2

If you are using yarn then put this command

yarn add @fortawesome/fontawesome-free

or

If you are using npm then put this command

npm install @fortawesome/fontawesome-free

and add @import '@fortawesome/fontawesome-free/css/all.css'; this in app.scss file

or add import '@fortawesome/fontawesome-free/css/all.css'; in app.js file

Answer 3

Make sure to have the .css extension, otherwise the import will fail.

As a reminder:

Install @fortawesome/fontawesome-free (with npm or yarn depending on what package manager your project uses).

Then in your main.js you can just import all.css as per the example below

import Vue from 'vue'
import App from './App.vue'

import '@fortawesome/fontawesome-free/css/all.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

This will allow you to use the fa classes in regular HTML tags. I also recommend taking a look at the Vue supported library for FontAwesome here if you want to have more granularity with your imports. https://github.com/FortAwesome/vue-fontawesome

Answer 4

This one worked for me, I Downgraded @fortawesome/fontawesome-free version to ^5.15.4 in the package.json