18

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

找不到多样式中的错误模块：错误：无法解析“/home/krishna/angular2_migrate/webui/node_modules”中的“/home/krishna/angular2_migrate/webui/node_modules/bootstrap/dist/css/bootstrap.min.css” /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
4

16 回答 16

22

在路径前添加 ../。

在 angular-cli.json 中，

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

更新

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

于 2017-03-09T14:37:40.903 回答
9

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

确保您为“样式”选项设置了正确的扩展名。就我而言，我安装了带有 SCSS 选项的 Angular CLI，但默认情况下扩展名设置为 SASS。

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

在此处输入图像描述

于 2019-02-01T02:51:16.890 回答
6

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

于 2018-05-27T00:29:27.713 回答
2

"./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"
]
于 2019-01-06T16:50:28.017 回答
1

转到 angular.json

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

在此处输入图像描述

于 2019-04-06T18:09:54.037 回答
1

就我而言，错误是因为我有

    "styles":[
      "styles.css"
    ]

在我的 .angular-cli.json

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

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

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

于 2018-03-10T06:02:50.663 回答
1

给出像“./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"
]
于 2019-01-06T16:56:22.930 回答
0

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

npm uninstall bootstrap --save

然后安装

npm install bootstrap@3.3.7 --save
于 2018-07-21T18:49:20.763 回答
0

安装primeng后，我在angular 7中遇到了同样的错误

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

于 2019-08-17T18:56:06.703 回答
0

您只需要在style.css中添加下面提到的代码

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

希望能帮助到你

于 2019-04-01T01:52:18.273 回答
0

将以下内容复制并粘贴到您的 {}angular.json 文件中应该可以完美运行。

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css" ],
于 2019-07-21T19:20:30.237 回答
0

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

之前： 在此处输入图像描述 之后： 在此处输入图像描述

于 2018-03-10T17:00:59.133 回答
0

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

于 2020-06-12T15:54:08.163 回答
0

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

npm uninstall bootstrap --save

然后，再次安装

npm uninstall bootstrap --save

它对我有用。

于 2019-11-04T14:49:20.703 回答
0

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

我构建成功

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

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

于 2019-09-16T06:46:56.773 回答
0

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

于 2018-08-25T09:12:26.327 回答