在 Angular 中使用本地 Bootstrap3 [英] Using local Bootstrap3 with Angular

问题描述

我使用 Angular cli 创建了一个 Angular 2 应用.

I have created an Angular 2 app using Angular cli.

在 index.html 中，我指的是 cdn 上的 bootstrap 3，它工作正常

In the index.html, I am referring to bootstrap 3 on cdn and it works fine

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

现在，我想使用本地副本，而不是使用来自 cdn 的引导程序.所以，我使用 npm

Now, instead of using the bootstrap from cdn, I would like to use a local copy. So, I installed bootstrap using npm

 npm install bootstrap@3

然后尝试在 index.html 文件中提供一个引用，该文件位于 src 内(与 node_modules 并行)

and then tried to provide a reference in the index.html file, which is inside src (parallel to node_modules)

 <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 

但是，这不起作用，我在浏览器控制台中看到以下内容(当我加载 index.html 时)

however, this does not work and I see the below in browser console (when I load index.html)

有人可以建议如何在本地加载引导程序吗?

Can someone please advice how to load bootstrap locally?

PS:我不想使用 Bootstrap4，因为它仍处于 alpha 阶段

PS: I don't want to use Bootstrap4 as it is still in alpha

推荐答案

在你的 .angular-cli.json 文件中是脚本 &接受字符串数组的样式属性(您的 npm 包的相对路径)

In your .angular-cli.json file are scripts & styles properties which accept an array of string (your relative path to your npm package)

这是您应该引用本地 javascript 和 css/scss/less 文件的地方.

This is where you should reference your local javascript and css/scss/less files.

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

在此处添加您的脚本，当运行 ng serve 时，这些文件将在您的 index.html 文件中创建.

Add your scripts here, when running ng serve these files will be created in your index.html file.

Angular-CLI 是构建应用的绝佳选择，而且它只会变得越来越好.

The Angular-CLI is a great choice to build apps with and it's only getting better.

这篇关于在 Angular 中使用本地 Bootstrap3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！