Question

我最近开始使用angular2-cli并创建了一个新项目。我想在我的项目中使用bootstrap，因此我安装了bootstrap然后想要导入bootstrap css文件，就像它在angular2-cli指南中所示。 https://github.com/angular/angular-cli#global-library-installation 运行服务后，我收到以下错误。

多种样式中的错误找不到模块：错误：无法解决＆＃39; /home/krishna/angular2_migrate/webui/node_modules/bootstrap/dist/css/bootstrap.min.css' 在＆＃39; /家庭/克里希纳/ angular2_migrate / WebUI中/ node_modules /角-CLI /模型＆＃39; @多样式

我做错了什么？

有关angular2-cli版本的信息

ChildComponent

Answer 1

在路径之前添加../。

在angular-cli.json中，

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.scss"
]

<强>更新

在angular7中，有angular.json文件，你不需要在路径

之前添加../

Answer 2

在Angular 7中，该文件称为“ angular.json”。

确保为“样式”选项设置了正确的扩展名。在我的情况下，我使用SCSS选项安装了Angular CLI，但默认情况下将扩展名设置为SASS。

       "styles": [
          "src/styles.scss" // default was: src/styles.sass
        ],

Answer 3

我正在使用 Angular 6 ，因此我的文件名为angular.json，但我可以通过删除它要求的“../”路径来解决类似的问题。下面是我为我的角度应用程序添加bootstrap和jquery的设置。

   "styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.css"
        ],
        "scripts": ["../node_modules/jquery/dist/jquery.js",
          "node_modules/bootstrap/dist/js/bootstrap.bundle.js"
      ]

注意：对于jquery我需要“../”，而bootstap不需要它。

根据我遇到的问题进行替代：

    "styles": [
          "src/styles.css", 
          "../node_modules/bootstrap/dist/css/bootstrap.css"
       ],
    "scripts": [
          "../node_modules/jquery/dist/jquery.js", 
          "../node_modules/bootstrap/dist/js/bootstrap.bundle.js"
      ]

此外，本文还包含多个备用选项。

https://medium.com/@rogercodes1/intro-to-angular-and-how-to-setup-your-first-angular-app-b36c9c3ab6ca

Answer 4

给出类似"./node_modules/bootstrap/dist/css/bootstrap.min.css"的路径 "../node_modules/bootstrap/dist/css/bootstrap.min.css"

"styles": 
[
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
]

Answer 5

在我的情况下，错误是因为我有

    "styles":[
      "styles.css"
    ]

在我的.angular-cli.json

中

我通过手动输入我的所有SCRIPTS和CSS的路径来解决它...例如

    "styles":[
      "styles/bootstrap.scss",
      "styles/app.scss",
     ]

angular-cli.json中的路径是相对于项目根目录（src /通常）。例如，你有src / styles.css文件，但是在angular-cli.json中，它只被列为styles.css。

Answer 6

给出类似“ ./node_modules/bootstrap/dist/css/bootstrap.min.css”的路径 “ ../ node_modules / bootstrap / dist / css / bootstrap.min.css”

"styles": 
[
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
]

Answer 7

这是我的修复。在您当前的目录中，您有一个名为.angular-cli.json的隐藏文件打开它并将“style.sass”更改为“style.css：运行构建，你就完成了。

在：后：

Answer 8

以下解决方案对我有用，因为引导4.0中似乎有一个错误：

npm uninstall bootstrap --save

然后安装

npm install bootstrap@3.3.7 --save

Answer 9

我遇到了同样的问题，但是我通过给出文件的完整路径来解决了这个问题像下面 "styles": [ "F:/Angular2Projects/Angular/myapp/node_modules/bootstrap/dist/css/bootstrap.min.css", "F:/Angular2Projects/Angular/my-app/src/styles.css" ],

Answer 10

您只需要在 style.css

中添加以下代码

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

希望有帮助

Answer 11

转到angular.json

导航到样式并为bootstrap.min.css添加另一个条目，例如

Answer 12

将以下内容复制并粘贴到{} angular.json文件中应该可以正常工作。

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css" ],

Answer 13

在安装primeng后，我在angular 7中出现了相同的错误

我从angular.json文件的路径中删除了./ 从“ src / styles.css”重命名“ src / styles.scss”，它对我有用

Answer 14

在angular.json文件中，我将styles.sass更改为styles.scss。

我构建成功

即导航到src文件夹并查看样式文件的扩展名

在angular.json样式对象中相应地进行更改

Answer 15

我有同样的问题。我通过卸载bootstrap

解决了该问题

npm uninstall bootstrap --save

然后重新安装

npm uninstall bootstrap --save

对我有用。

Answer 16

将为node_modules提供完整的物理路径。我已经给出了完整的物理路径文件的路径，并最终解决了问题

angular2-cli给出了@multi样式错误

16 个答案: