web-dev-qa-db-fra.com

Comment ajouter une police géniale avec ASP.NET.Core Angular modèle

J'utilise le modèle NET.Core 2.0 Angular, qui fonctionne avec webpack, angular-cli, composant angulaire, TypeScript.

J'ai fait:

ligne de commande - Installer le package et le chargeur

npm install --save font-awesome
npm install url-loader --save-dev

webpack.config.js - Ajouter une règle de chargeur

    module: {
        rules: [
             ...
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" }
        ]
    },

my.component.css - Importer dans mon composant

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

my.component.html - Mettez l'icône

<i class="fa fa-check fa-6"></i>

Maintenant, je n'ai plus de message d'erreur mais je ne vois toujours pas l'icône.

Ai-je fait quelque chose de mal?

angularwebpackasp.net-coreasp.net-core-2.0
5
John_J

Merci les gars pour votre aide ~

Finalement, j'ai résolu le problème en mettant à jour le fichier webpack.config.js pour:

module: {
  loaders: [
    {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url-loader"
    },
    {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url-loader"
    }
  ]
}

plutôt que de le mettre dans le rules: [...]

C'est bizarre que rules ne marche pas ... mais quand même ~: P

2
John_J

Ceci est pour .NET Core 2, après avoir créé un projet SPA à l'aide de dotnet new angular:

  1. Accédez à la racine du projet et installez le package: npm install font-awesome --save. Vous devriez maintenant le voir dans les dépendances package.json.

  2. Après cela, allez à webpack.config.vendor.js et ajoutez une police géniale au tableau sous des modules non-shakables:

    const nonTreeShakableModules = [
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'font-awesome/css/font-awesome.css',
    'jquery',
];

  3. Nous devons maintenant indiquer au pack Web que nous avons ajouté ce nouveau package. Donc, si vous ne l'avez pas déjà fait, installez ceci à la racine du projet avec npm install --save-dev npm-install-webpack-plugin.

  4. Enfin, exécutez cette commande à la racine du projet: webpack --config webpack.config.vendor.js

10
dave o grady

Peut-être suis-je le seul à avoir installé font-awesome comme npm install fontawesome --save? Cela aurait dû ressembler à npm install font-awesome --save. Merde!

2
Adam Cox