Webpack: Problems importing font-awesome

Created on 24 Feb 2018 · 9Comments · Source: vuejs-templates/webpack

I've tried to use yarn add font-awesome and added the import to my App.vue:

<template>
  <div id="app">
    <main-nav></main-nav>
    <div class="container">
      <!--<img src="./assets/logo.png">-->
      <router-view/>
    </div>
  </div>
</template>

<script>
  import MainNav from "./components/MainNav.vue";

  export default {
    components: {MainNav},
    name: 'App'
  }
</script>

<style lang="css">
  @import '../node_modules/vue-multiselect/dist/vue-multiselect.min.css';
</style>

<style lang="scss">
  @import '../node_modules/bootstrap/scss/bootstrap.scss';
  @import '../node_modules/font-awesome/scss/font-awesome';
</style>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    margin-top: 0px;
  }
</style>

This error came then up:

./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=1!./src/App.vue
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot' in 'C:\xampp\htdocs\jagd\src'
 @ ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=1!./src/App.vue 7:193414-193457
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=1!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

I have no idea why, I've checked the config files and there are loaders for eot, wot and so on defined. Is this an issue with the template configuration? Requires it additional configuration?

It might be just me, but honestly the build setup for JS apps is a huge PITA. :(

Source

burzum

👍3

Most helpful comment

Hi @burzum, @LinusBorg and @kshitijmehta.

You can install fontawesome 5 like this.

npm install @fortawesome/fontawesome-free-webfonts

try this.
enter the path in the $ fa-font-path variable and import all required scss.

<template>
    <div>
        <h3>
            Hello FontAwesome
            <i class="fa fa-exclamation"/>
            <i class="fas fa-star"/>
            <i class="far fa-star"/>
            <i class="fab fa-linux"/>
        </h3>
    </div>
</template>

<script>
export default {
    name: "FontAwesome"
};
</script>

<style lang="scss">
    $fa-font-path : "~@fortawesome/fontawesome-free-webfonts/webfonts";
    @import "~@fortawesome/fontawesome-free-webfonts/scss/fontawesome.scss";
    @import "~@fortawesome/fontawesome-free-webfonts/scss/fa-solid.scss";
    @import "~@fortawesome/fontawesome-free-webfonts/scss/fa-regular.scss";
    @import "~@fortawesome/fontawesome-free-webfonts/scss/fa-brands.scss";
</style>

I recommend including the