为Angular 8添加Bootstrap

问题描述 投票:0回答:1

我正试图将Bootstrap添加到我的Angular应用程序中。我是一个新手,虽然按照要求的步骤,我遇到了安装bootstrap的问题。

  1. 我做了所有必要的步骤,包括安装Angular cli、ng new first-app和ng serve。

  2. 我打开VS代码终端,尝试用以下方法安装bootstrap。

    npm install bootstrap --save

  3. 然后在style.css中添加以下内容

    @import "~bootstrapdistcssbootstrap.css"

但是,当我点击悬停在上面一段代码上的链接时,它仍然说无法定位文件,并提示用这个路径创建一个文件。

javascript jquery css angular frontend
1个回答
1
投票

如果你只是想添加bootstrap的样式,在angular.json文件中有一个属性,允许你在构建中包含它。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "yourproject": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ]
          },
        ...

请看。https:/angular.ioguideworkspace-config#styles-and-scripts-configuration。


0
投票

欢迎来到StackOverflow!

Bootstrap不是TypeScript代码,所以你不需要导入它。 相反,它是CSS代码,因此你要在你的 index.html 文件作为`

下面是我如何在我的应用程序中导入boostrap--下面的内容进入了 <head> 的标签 index.html

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

这样我就可以在我的任何代码模板中使用Bootstrap。

另外,这段代码会链接到4.3.1版本--如果你想链接到不同的版本,你可以到 https:/getbootstrap.com。 并获得一个 "新鲜 "的链接--这个网站对你使用CDN链接很有帮助。

但我看到你想把它导入到你的style.css文件中,所以你很可能要使用一个相对路径,可能是这样的。

@import "../node_modules/bootstrap/dist/css/bootstrap.css";

0
投票

添加bootstrap的一个简单方法是使用Angular CLI(npm install)。

从命令行界面安装bootstrap,并在angular.json中引用它。

npm install bootstrap --save
© www.soinside.com 2019 - 2024. All rights reserved.