angular2-cli 给出@multi 样式错误

Question

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

ERROR in multi styles Module not found: Error: Can't resolve '/home/krishna/angular2_migrate/webui/node_modules/bootstrap/dist/css/bootstrap.min.css' in '/home/krishna/angular2_migrate/webui/node_modules/angular-cli/models' @ multi styles

我做错了什么？

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

在路径前添加../。[=11=]

在angular-cli.json,

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

更新

在angular7中，有angular.json个文件，路径前不需要加../

Answer 2

在我的例子中，错误是因为我有

    "styles":[
      "styles.css"
    ]

在我的.angular-cli.json

我通过手动输入我所有脚本的路径和 CSS 解决了这个问题。例如

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

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

Answer 3

这是适合我的解决方法。在你的当前目录中，你有一个名为 .angular-cli.json 的隐藏文件打开它并将 "style.sass" 更改为“style.css: 运行 ng 构建完成。

之前：后：

Answer 4

我正在使用 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 5

下面的解决方案对我有用，因为 bootstrap 4.0 中似乎有一个错误：

npm uninstall bootstrap --save

然后安装

npm install bootstrap@3.3.7 --save

Answer 6

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

Answer 7

给路径喜欢 "./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 8

给路径像“./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 9

在 Angular 7 中，文件名为 'angular.json'。

确保您为 "styles" 选项设置了正确的扩展集。在我的例子中，我安装了带有 SCSS 选项的 Angular CLI，但扩展名默认设置为 SASS。

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

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 提供完整的物理路径。我已提供完整的物理路径 css 文件的路径并最终解决问题

angular2-cli 给出@multi 样式错误

angular2-cli gives @multi styles error

css

styles

angular2-cli

angular