web-dev-qa-db-fra.com

Utilisez font-awesome dans une application Vue créée avec le webpack vue-cli

J'essaie d'utiliser la police-awesome dans une simple application Vue créée avec vue-cli en utilisant le modèle webpack-simple, mais cela est délicat.

J'ai installé font-awesome en utilisant npm install font-awesome --save et importé dans mon entrée js (main.js)

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import Home from "./components/Home.vue"

Vue.use(VueRouter);

import 'font-awesome/css/font-awesome.css';

const routes = [
    { path: '/', component: Home }
];

const router = new VueRouter({
    routes,
    mode: 'history'
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

Voici mon fichier webpack.config.js actuel:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this nessessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/, 
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/octet-stream"
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file"
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=image/svg+xml"
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

J'ai déjà essayé de changer les chargeurs de polices comme suit:

{
    test: /\.(png|jpe|jpg|gif|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
    loader: 'file-loader',
    options: {
      name: '[name].[ext]?[hash]'
    }
}

Mais les deux configurations génèrent la même erreur:

ERROR in ./~/font-awesome/css/font-awesome.css
Module parse failed: /home/james/projects/app/node_modules/font-awesome/css/font-awesome.css Unexpected character '@' (7:0)
You may need an appropriate loader to handle this file type.
| /* FONT PATH
|  * -------------------------- */
| @font-face {
|   font-family: 'FontAwesome';
|   src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
 @ ./src/main.js 11:0-43
 @ multi main

Après quelques recherches sur Google, j'ai trouvé des liens ( ici , ici et ici par exemple), mais l'un d'eux fonctionne pour moi, l'erreur est toujours le même.

Quel est le chargeur recommandé pour gérer les fichiers impressionnants? Je pense que le problème est dans le chargeur, car toutes les expressions regex me semblent bien.

Pour information, voici les versions en package.json:

"dependencies": {
    "bulma": "^0.3.0",
    "font-awesome": "^4.7.0",
    "vue": "^2.1.0",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "style-loader": "^0.13.1",
    "vue-loader": "^10.0.0",
    "vue-template-compiler": "^2.1.0",
    "webpack": "^2.1.0-beta.25",
    "url-loader": "^0.5.5",
    "webpack-dev-server": "^2.1.0-beta.9"
  }
webpackfont-awesomevuejs2
14
James

Il semble que vous devez inclure un chargeur pour .css dans la configuration de votre webpack:

  {
    test: /\.css$/,
    loader: 'css-loader'
  },
4
J. Bruni

Avec la version FontAwesome-5 , il y a des choses exclusives faites par l'équipe FontAwesome pour vue et d'autres bibliothèques:

Un peu solution obsolète mais fonctionne toujours, vérifiez la solution mise à jour ci-dessous:

  • Vérifiez les options avancées de fontawesome ici
  • Pour le paquet npm et la vérification de la documentation ici

Quoi qu'il en soit, voici ce que j'ai fait pour l'intégrer, j'ai d'abord installé ces packages:

npm i --save @fortawesome/fontawesome
npm i --save @fortawesome/vue-fontawesome
npm i --save @fortawesome/fontawesome-free-solid

Créez un fichier appelé fa.config.js et inclus ce code:

import Vue from 'vue';
import fontawesome from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
import {
  faSpinner,
  faAngleLeft,
  faAngleRight,
} from '@fortawesome/fontawesome-free-solid';

fontawesome.library.add(
  faSpinner,
  faAngleLeft,
  faAngleRight,
);

Vue.component('font-awesome-icon', FontAwesomeIcon); // registered globally

Et importez-le dans main.js

import './path/to/fa.config';

Et dans mes composants, je l'utilise comme ceci:

<template>
  <div>
    <font-awesome-icon icon="angle-left"></font-awesome-icon> Hey! FA Works
  </div>
</template>

Vous avez peut-être déjà compris quel est l'avantage de faire comme je l'ai fait ci-dessus?

L'utilisation d'une icône explicite offre l'avantage de regrouper uniquement les icônes que vous utilisez dans votre fichier groupé final. Cela nous permet de sous-définir les milliers d'icônes de Font Awesome au seul petit nombre normalement utilisé.

J'espère que cela t'aides!

MISE À JOUR - Vendredi 22 juin 2018
La solution ci-dessus fonctionne toujours mais maintenant les choses se font de manière différente, installez d'abord ces packages:

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons // if "regular" icon package needed
npm i --save @fortawesome/vue-fontawesome

Créez ensuite un fichier appelé fa.config.js et inclus ce code:

import Vue from 'vue';
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import { faUser, faBuilding } from '@fortawesome/free-solid-svg-icons'
import { faUserCircle, faCheckCircle } from '@fortawesome/free-regular-svg-icons'

library.add(
  faUser,
  faBuilding,
  faUserCircle,
  faCheckCircle,
);

Vue.component('font-awesome-icon', FontAwesomeIcon); // registered globally

Supposons que vous aimez utiliser l'icône faUser du type regular et solid, puis procédez comme suit:

import { faUser as faUserSolid, faBuilding } from '@fortawesome/free-solid-svg-icons'
import { faUser as faUserRegular, faCheckCircle } from '@fortawesome/free-regular-svg-icons'

library.add(
  faUserSolid,
  faUserRegular,
  faBuilding,
  faCheckCircle,
);

Et importez-le dans main.js

import './path/to/fa.config';

Et dans mes composants, je l'utilise comme ceci:

<template>
  <div>
    <font-awesome-icon icon="user"></font-awesome-icon>

    // If you like to use Font Awesome Regular, then:
    <font-awesome-icon :icon="['far', 'user']"></font-awesome-icon>
    <font-awesome-icon :icon="['far', 'check-circle']"></font-awesome-icon>

  </div>
</template>
15
Syed