包括Aurelia中的引导css

我对奥雷莉亚还不熟悉，第一个跨栏就摔倒了。 我已经使用aurelia cli创建了一个新项目，并选择使用较少的工具

在我尝试使用bootstrap之前，这一切都很好。我已经安装了带有npm的引导程序，它出现在node_模块/引导程序中/

它具有目录结构

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

dist目录中有css文件

在我的模板中，我是这样做的

我得到的错误是 未处理的拒绝错误：加载所需CSS文件失败：bootstrap/CSS/bootstrap.CSS

我如何告诉Aurelia引导css文件在哪里以及如何使用它们

---

感谢

我们仍在研究CLI将库导入项目并正确配置它们以进行绑定的能力。记住，这是阿尔法。我们将在未来对此进行重大改进。同时，请记住，如果您不确定要做什么，您可以始终使用传统技术来包含库。因此，我只需要在html页面中包含样式标记和脚本标记，只需指向packages文件夹中文件的位置

---

这是我们的一个主要用例，我们只是还没有开发出所有的库导入功能。我们很快就会解决这个问题。

从npm下载了引导解决方案：

app.html：

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

aurelia.json（aurelia_项目文件夹）必须添加到“app bundle.js”捆绑包的末尾：

应该是这样的：

"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"
        ]
      }
    ]
  },

---

这对我很有用。

我发现了一件简单的事情。每次修改aurelia.json文件时，您都需要终止

aurun--watch

任务，并再次启动它，它就会正常工作

我在文档中没有找到这个

---

希望这有帮助。

使用Aurelia CLI

首先在项目中安装以下组件：

• au安装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"
}

第三个，在设置导入/安装后。现在，您可以在app.html中引用它

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

---

有关安装/导入的更多信息，请检查或添加库。

我发现我必须将app.html中的Bootstrap css路径更改为Bootstrap 4的预期路径，请参见Aurelia Discussion上的a：

由此：

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

为此：

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

如果你在2019年7月来到这里，@davidjmcclelland的回答对我来说很有用。安装引导后，在app.html中简单地包含require from=bootstrap/dist/css/bootstrap.css>。无需配置。

在浏览器中加载页面时，我完成了您所说的操作，但运气不佳。它将在调试[模板化]导入组件/chat.html[“bootstrap/css/bootstrap.css”]的资源时陷入困境&无法继续加载。我可以看到引导程序在JS工作时被正确地注入。如果存在，请尝试从aurelia.json中删除“JS/bootstrap.min.JS”。它可能会产生问题。上面的步骤1缺少关闭

require

标记。应该是：

遵循“联系人管理器教程”或“具有其他资源的库”中概述的步骤。我得到错误“Bootstrap的JavaScript需要jQuery”@alearg-确保您安装的jQuery版本与您的Bootstrap版本要求的版本相同。例如，尝试

npm安装jquery@2.2.4--保存

并重新启动应用程序。这对于2018年的联系人管理器教程来说仍然是一个问题。它仍然是alfa？非常感谢！奇怪的是，aurelia在他们的教程中没有注意到这一点。谢谢，这也是我的问题的解决方案。示例如下： require from=bootstrap/dist/css/bootstrap.css>

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

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

require from=bootstrap/dist/css/bootstrap.css>