web-dev-qa-db-ja.com

bootstrap cssをAureliaに含める

私はAureliaに不慣れで、最初のハードルに陥っています。 aurelia cliを使用して新しいプロジェクトを作成し、使用量を減らすことを選択しました。

ブートストラップを使おうとするまで、これは問題なく機能します。 node_modules/bootstrap /に表示されるnpmを使用してbootstrapをインストールしました

これはディレクトリ構造を持っています

dist fonts grunt Gruntfile.js js less LICENSE package.json README.md

Distディレクトリにcssファイルがあります。

私のテンプレートでは

私が得るエラーは未処理の拒否ですエラー：必要なCSSファイルのロードに失敗しました：bootstrap/css/bootstrap.css

bootstrap cssファイルの場所とその使用方法をAureliaに伝えるにはどうすればよいですか？

ありがとう

aurelia
10
Glenn Pierce

ライブラリをプロジェクトにインポートし、バンドル用に正しく構成するCLIの機能についてはまだ作業中です。覚えておいてください、それはアルファです。将来的には、これについて大幅な改善が行われる予定です。それまでの間、何をすべきかわからない場合は、ライブラリを含めるための従来の手法をいつでも使用できることを忘れないでください。したがって、パッケージフォルダ内のファイルの場所を指すだけで、htmlページにstyleタグとscriptタグも含めるだけです。

これは私たちの主要なユースケースであり、まだすべてのライブラリインポート機能を実行していません。これについてはすぐに対処します。

5
EisenbergEffect

簡単なことが1つ見つかりました。 aurelia.jsonファイルを変更するたびに、au run --watchタスクを終了し、再度開始する必要があります。これで問題なく動作します。

私はこれをドキュメントで見つけませんでした。

お役に立てれば。

17
Michal Krchnavy

bootstrap npmからダウンロード）の解決策があります：

  1. app.html：

    <require from="bootstrap/css/bootstrap.css"></require>

  2. 追加する必要があるpackage.json：

    "overrides": {
   "npm:jquery@^3.0.0": {
     "format": "AMD"
   }
}

  3. 「app-bundle.js」バンドルの最後に追加する必要があるaurelia.json（aurelia_projectフォルダー）：

    "dependencies": [
"jquery",
 {
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.min",
    "deps": ["jquery"],
    "exports": "$",
    "resources": [
    "css/bootstrap.css"
  ]
}
]

次のようになります。

"bundles": [
  {
    "name": "app-bundle.js",
    "source": [
      "[**/*.js]",
      "**/*.{css,html}"
    ],
    "dependencies": [
      "jquery",
      {
        "name": "bootstrap",
        "path": "../node_modules/bootstrap/dist",
        "main": "js/bootstrap.min",
        "deps": ["jquery"],
        "exports": "$",
        "resources": [
          "css/bootstrap.css"
        ]
      }
    ]
  },

わたしにはできる。

6
ohdev

Aurelia CLIの使用

最初、プロジェクトに以下をインストールします。

  • au install jquery @ 2
  • auインストールブートストラップ

Second、aurelia.jsonでこの行をbundles：vendor-bundle.jsに追加します

"jquery",
{
  "name": "bootstrap",
  "path": "../node_modules/bootstrap/dist",
  "main": "js/bootstrap.min",
  "deps": [
    "jquery"
  ],
  "resources": [
    "css/bootstrap.css"
  ],
  "exports": "$"
}

次に、依存関係の後に次のフォントを追加します

"copyFiles": {
  "node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2": "bootstrap/fonts",
  "node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff": "bootstrap/fonts",
  "node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf": "bootstrap/fonts"
}

3番目、インポート/インストールを設定した後。これで、app.html内で参照できます。

<require from="bootstrap/css/bootstrap.css"></require>

または、main.ts内に globalResources として追加するだけです。

aurelia.use
    .standardConfiguration()
      .feature('resources')
      .globalResources('bootstrap/css/bootstrap.css');

au install/importの詳細については、チェックしてください ここ またはライブラリを バンドル に追加してください。

2
jmvtrinidad

App.htmlのboostrapcssパスを、AureliaDiscourseの comment ごとにBootstrap 4）で期待されるパスに変更する必要があることがわかりました。

これから：

<require from="bootstrap/css/bootstrap.css"></require>

これに：

<require from="bootstrap/dist/css/bootstrap.css"></require>
1
davidjmcclelland

あなたが2019年7月にここにいるなら、@ davidjmcclellandによる答えが私のために働いたものです。ブートストラップをインストールした後、単純なインクルード

from = bootstrap/dist/css /bootstrap.css>が必要です
0
Victor