Question

我是Aurelia的新手并且陷入了第一道障碍。我使用aurelia cli创建了一个新项目，并选择使用less。

这个工作正常，直到我尝试使用bootstrap。我已经安装了npm的bootstrap，它出现在node_modules / bootstrap /

中

这有目录结构

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

dist目录中有css文件。

在我的模板中

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

如何告诉Aurelia bootstrap css文件在哪里以及如何使用它们？

由于

Answer 1

我发现了一件简单的事情。每次修改aurelia.json文件时，都需要终止au run --watch任务，再次启动它，它才能正常工作。

我在文档中没有找到这个。

希望这有帮助。

Answer 2

有从npm下载的bootstrap解决方案：

app.html：

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

package.json你必须添加：

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

aurelia.json（aurelia_project文件夹）你必须在“app-bundle.js”包的末尾添加：

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

它对我有用。

Answer 3

我们仍在努力将CLI导入项目并正确配置它们以进行捆绑。记住，这是一个阿尔法。我们将来会有重大改进。与此同时，请记住，如果您不确定该怎么做，您可以随时使用传统技术来包含库。所以，我只是在你的html页面和脚本标签中包含样式标签，只需指向包文件夹中文件的位置。

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

Answer 4

使用Aurelia CLI

首先，在您的项目中安装以下内容：

au install jquery @ 2
au install bootstrap

第二，在aurelia.json中添加以下行：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>

或者只是将其添加为main.ts

中的globalResources

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

有关au install/import的详情，请查看here或在bundles中添加库。

Answer 5

我发现我必须根据Aurelia Discourse上的comment，将app.html中的boostrap css路径更改为Bootstrap 4预期的路径：

从这里：

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

对此：

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

Answer 6

如果您在2019年7月在这里，@ davidjmcclelland的答案对我有用。安装引导程序后，只需在您的app.html中包含

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

。无需配置。

在Aurelia中包含bootstrap css

6 个答案: