web-dev-qa-db-ja.com

ASP.NET Core v2を使用してVisual Studio 2017にfont-awesomeをインストールする方法

ASP.NET Core v2を使用してWebページを構築していて、font-awesomeを使用したいと考えています。

最初に、私がいくつかのことを試したとしましょう。 NPMからBowerをインストールする、NPMからfont-awesomeをインストールする、VSのBowerパッケージからfont-awesomeをインストールするようなものですが、何も機能しないようです。

font-awesomeをインストールする正しい方法を誰かが提供してくれますか（多くのコンソールコマンドやファイルの手動コピーを使用せずに推奨）。

これは私のdepedencisesが現在どのように見えるかです

enter image description here

enter image description here

enter image description hereenter image description here

asp.net-mvcnpmvisual-studio-2017bowerfont-awesome
3
Thomas Adrian

私はWindows 10でASP.NET Core 2.0.8を使用していますが、私のプロジェクトにもFAを組み込むのに苦労しました。次のように、依存関係の下で（他の人が述べたように）package.jsonに追加することで、NPMに追加できました。

    {
      "version": "1.0.0",
      "name": "asp.net",
      "private": true,
      "devDependencies": {},
      "dependencies": {
        "bootstrap": "^4.1.1",
        "font-awesome": "4.7.0",
        "jquery": "^3.3.1",
        "popper.js": "^1.14.3"
      }
    }

残念ながら、それはパッケージを復元しましたが、期待した場所にcssファイルをデプロイしなかったため、それらを参照することができました。以下がそれを行うための「正しい」方法のようなものだとは信じていません（まだ学習中です！）、それは私にとってはうまくいきました。

ソリューションエクスプローラー：

  • Dependencies> npmに移動します
  • 右クリックfont-awesome> ファイルエクスプローラーで開く
  • cssフォルダに移動します
  • .cssファイルをコピーする
  • Visual Studioに戻り、Solution Explorerでwwwrootに移動します
  • 右クリックcss> ファイルエクスプローラーで開く
  • ファイルに貼り付け

これらをプロジェクトにドラッグして参照を作成し、次のようにFont Awesomeの使用を開始できます。

_Layout.cshtml：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] websiteTitle</title>
    
        <environment include="Development">
            <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
            <link rel="stylesheet" href="~/css/site.css" />
            <link href="~/css/font-awesome.css" rel="stylesheet" />
        </environment>
        <environment exclude="Development">
            <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/4.1.1/css/bootstrap.min.css"
                asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
            <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
        </environment>
    </head>

これが私のように立ち寄った人にとって役立つことを願っています。

4
Paul Maxwell

Bowerは廃止されます。 NuGetは.NETパッケージに焦点を当てているため、_font-awesome_を取得する最善の方法はNPMを使用することです。

1.NPMをダウンロードする

最新のnodejsがインストールされていることを確認してください。 https://nodejs.org/en/ に移動して、LTSバージョンをダウンロードします。

マシンにインストールされているnodeおよびnpmのバージョンを確認するには：

  1. Visual Studioでプロジェクトを右クリックします。
  2. 「コマンドラインを開く」を選択します
  3. 「デフォルト（Cmd）」（または使用するコマンドプロンプト）を選択します。
  4. コマンド_node -v_および_npm -v_を実行する

enter image description here

2. _package.json_を追加します

プロジェクトにnpm構成ファイルが必要です。この構成ファイルには、すべてのパッケージがリストされており、必要なときにパッケージを復元するためにnpmによって使用されます。

Npm構成ファイルを追加するには：

  1. Visual Studioでプロジェクトを右クリック
  2. [追加]-> [新しいアイテム]を選択します
  3. 左側で「ASP.NET Core」を選択し、右上の検索バーで「npm」を​​検索します
  4. 「追加」を押します

enter image description here

3. font-awesome（およびその他）をインストールする

_package.json_を開き、devDependenciesの下で_"font-awesome":_と入力するだけで、選択可能なバージョンのリストが自動的に表示されます。好きなバージョンを選んでください。

この_package.json_ファイルを保存することにより、npmはプロジェクトの下の非表示の_node_modules_フォルダーにリストされているライブラリーをダウンロードします。

enter image description here

4.ファイルをwwwrootにコピーします

ASP.NET Core MVCアプリケーションで、スタイルやJavaScriptファイルなどの静的コンテンツを使用する場合は、_Startup.cs_でapp.UseStaticFiles();を有効にする必要があるほか、ファイルをにコピーする必要があります。 wwwrootフォルダー。デフォルトでは、たとえば、_node_modules_のコンテンツは、アプリケーションでサービスできません。

もちろん、必要なファイルを手動でwwwrootフォルダにコピーすることもできます。ただし、新しいバージョンが出てくるたびにファイルを置き換える必要があります。

ファイルを正しくコピーするには、サードパーティのツールを使用する必要があります！

BundlerMinifier は、必要なファイルをバンドルして、必要なディレクトリに出力するために使用できる優れたツールです。 _bundleconfig.json_と呼ばれる同様の構成ファイルを使用します。

enter image description here

ただし、このツールは_.css_および_.js_以外のファイルタイプではうまく機能しません。 font-awesomeスタイルはurl();を使用するため、font-awesome fontsフォルダーへの相対URLの問題もあります（_"adjustRelativePaths": false_の設定が常に機能するとは限りません）。

5. Gulpタスクを作成する

Font = awesomeファイルとフォントをwwwrootフォルダに正しく移動するには、gulpを使用して、ビルド前に実行できるタスクを設定します。ビルド後など：

5.1。インストールgulp（およびrimraf、UNIXコマンド_rm -rf_）

_package.json_に移動し、依存関係リストにgupおよびrimrafと入力します。ファイルを保存します。

enter image description here

5.2。プロジェクトに_gulpfile.js_を追加し、タスクを定義します

基本的に、font-awesomeをwwwroot/libsフォルダーに移動するタスクを作成し、クリーンアップの逆を行う別のタスクを作成する必要があります。 font-awesomeに関連しない他のタスクは省略しました。

enter image description here

5.3タスクを実行する

_gulpfile.js_をセットアップすると、「タスクランナーエクスプローラー」にリストされているタスクを確認できるようになります。 Visual Studioにそのウィンドウがない場合は、[表示]-> [その他のウィンドウ]に移動します。

enter image description here

タスクを右クリックして[実行]をクリックすると、手動でタスクを実行できます。または、ビルド前、ビルド後、クリーン、またはプロジェクトを開いたときに自動的に実行することもできます。

バインディングを設定すると、ヘッダーが_gulpfile.js_に追加されます。

enter image description here

_gulpfile.js_ファイルを保存して、プロジェクトをビルドします。すばらしいフォントとファイルは、自動的にwwwrootに移動され、使用できるようになります。

enter image description here

1
David Liang

これにはLibManを使用することをお勧めします（ 短いドキュメントの使用方法 ）。

私は手動で書きましたが、「追加->クライアント側ライブラリ」から追加できます。ここに私のlibman.jsonがあります

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
    "libraries": [
        {
            "library": "[email protected]",
            "destination": "wwwroot/lib/font-awesome",
            "files": [
                "css/font-awesome.min.css",
                "fonts/fontawesome-webfont.eot",
                "fonts/fontawesome-webfont.svg",
                "fonts/fontawesome-webfont.ttf",
                "fonts/fontawesome-webfont.woff",
                "fonts/fontawesome-webfont.woff2",
                "fonts/FontAwesome.otf"
            ]
        }
    ]
}
1
Aleksej Vasinov

Package.jsonに移動します

次のタグを追加します"font-awesome"： "^ 4.7.0"dependenciesセクションに

例：-

  {
  "name": "imsy-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "angular2-moment": "^1.9.0",
    "core-js": "^2.4.1",
    "ng2-toasty": "^4.0.3",
    "ng5-breadcrumb": "0.0.6",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.20",
    "font-awesome": "^4.7.0"
  },
  "devDependencies": {
    "@angular/cli": "1.6.6",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "TypeScript": "~2.5.3"
  }
}
1
MAFAIZ

Microsoft からの推奨として

Bootstrap ASP.NET Coreのような）クライアント側の依存関係をインストールするための推奨される方法は、Bowerを使用することです（bower.jsonを使用）

bower.jsonファイルを開き、font-awesomeを依存関係に追加します

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "Font-Awesome": "4.3.0"
  }
}

.bowerrcの下にあるbower.jsonファイルを開きます。directoryプロパティはwwwroot/libに設定され、Bowerがパッケージアセットをインストールする場所を示します。

{
 "directory": "wwwroot/lib"
}

これでfont-awesomeを以下のように参照できます

<link href="/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />

Font Awesomeを使い始める最も簡単な方法は、パブリックコンテンツ配信ネットワーク（CDN）の場所を使用して、フォントへの参照を追加することです。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

詳細については：
https://docs.Microsoft.com/en-us/aspnet/core/client-side/bower

0
ElasticCode

これは.NET Core 2用で、dotnet new angularを使用してSPAプロジェクトを作成した後です。

プロジェクトのルートに移動して、パッケージをインストールします：npm install font-awesome --save。これで、package.json依存関係に表示されます。

その後、webpack.config.vendor.jsに移動し、非ツリーシェイカブルモジュールの下の配列にfont awesomeを追加します。

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

次に、この新しいパッケージを追加したことをwebpackに通知する必要があります。そのため、まだ実行していない場合は、npm install --save-dev npm-install-webpack-pluginを使用してプロジェクトのルートにこれをインストールしてください。

最後に、プロジェクトのルートで次のコマンドを実行します：webpack --config webpack.config.vendor.js

0
Aftab Lala