angular2-cli 给出@multi 样式错误

Question

我最近开始使用 angular2-cli 并创建了一个新项目。我想在我的项目中使用引导程序，因此我安装了引导程序，然后想要导入引导程序 css 文件，就像它在此处的 angular2-cli 指南中显示的那样。 https://github.com/angular/angular-cli#global-library-installation 运行 ng serve 后出现以下错误。

找不到多样式模块中的错误：错误：无法解决 '/home/krishna/angular2_migrate/webui/node_modules/bootstrap/dist/css/bootstrap.min.css' 在 '/home/krishna/angular2_migrate/webui/node_modules/angular-cli/models' @多样式

我做错了什么？

关于 angular2-cli 版本的信息

krishna@Krishna:~/angular2_migrate/webui$ ng version
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.17
node: 4.4.3
os: linux x64

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 添加到我的 Angular 应用程序的设置。

   "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.json

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

Answer 8

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

之前： 后：

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

以下解决方案对我有用，因为 bootstrap 4.0 中似乎存在错误：

npm uninstall bootstrap --save

然后安装

npm install bootstrap@3.3.7 --save

Answer 11

您只需在 style.css

中添加下面提到的代码

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/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

我有同样的问题。我通过卸载引导程序解决了它

npm uninstall bootstrap --save

然后，再次安装它

npm uninstall bootstrap --save

它对我有用。

Answer 16

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