3

我已使用以下步骤将引导程序包含到我的 Angular 项目中

  1. 使用 cli 创建 angular 项目
  2. npm install bootstrap@3 jquery --save
  3. 然后像往常一样将脚本和样式路径添加到我的索引文件中

该样式不适用于我的页面。还有什么我必须做的。我正在从索引页面添加我的 HTML 代码片段

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Project</title>
  <script  src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h1>ewreeew</h1>
    <button class="btn btn-primary">Test Button</button>
  <app-root></app-root>
</body>
</html>
版本详细信息是：Angular CLI：6.0.8

节点：8.11.2

操作系统：win32 x64

角度：6.0.5

... 动画、通用、编译器、编译器-cli、核心、表单

... http、语言服务、平台浏览器

...平台-浏览器-动态，路由器

包版本

@angular-devkit/架构师 0.6.8

@angular-devkit/build-angular 0.6.8

@angular-devkit/build-optimizer 0.6.8

@angular-devkit/核心 0.6.8

@angular-devkit/schematics 0.6.8

@角/cli 6.0.8

@ngtools/webpack 6.0.8

@原理图/角度 0.6.8

@原理图/更新 0.6.8

rxjs 6.2.1

打字稿2.7.2

网络包 4.8.3

谢谢

4

2 回答 2

4

将您的引导文件添加到全局styles.css文件中，如下所示：-

@import "~bootstrap/dist/css/bootstrap.css";
于 2019-06-15T08:59:43.707 回答
0

我怀疑问题是文件的路径。包含依赖项的最佳方法是在“angular.json”文件的构建目标中添加样式和脚本数组。您可以使用绝对路径而不是相对路径，因此您可以使用“node_modules/”而不是“../node_modules/”。

以下是构建目标的示例：

 "build": {
   "builder": "@angular-devkit/build-angular:browser",
   "options": {
     "styles": [                  
       "src/styles.css",
       "node_modules/bootstrap/dist/css/bootstrap.min.css"
       "node_modules/bootstrap/dist/css/bootstrap-theme.min.css"   
     ],
     "scripts": [
       "node_modules/jquery/dist/jquery.min.js",
       "node_modules/bootstrap/dist/js/bootstrap.min.js"
     ]
  }

您可能已经包含了 jQuery，但我在您的示例中没有看到它。我在这里添加它以防万一。

于 2019-03-23T17:41:22.797 回答