包括Aurelia的bootstrap css

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解决方案:

1. app.html:

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

2. package.json你必须添加:

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

3. 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页面和脚本标签中包含样式标签,只需指向包文件夹中文件的位置即可.

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