Question

我是Angular 6的新手，在我的项目中出现以下错误

 ERROR in multi ./node_modules/bootstrap/dist/css/bootstrap.min.css ./styles.css
Module not found: Error: Can't resolve 'C:\Users\User\e-CommerceWebsite\styles.css' in 'C:\Users\User\e-CommerceWebsite'

，浏览器显示

cannot Get

angular.json

 "styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "styles.css"
        ],
        "scripts": [
          "./node_modules/jquery/dist/jquery.min.js",
          "./node_modules/popper.js/dist/popper.min.js",
          "./node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

styles.css

@import '~bootstrap/dist/css/bootstrap.min.css';
...
...
...

引荐如下：bootstrap not connect to the angular 6?

任何人都可以帮助我解决此错误。

Answer 1

它基本上走了错误的道路。我们需要将路径设置为../node_modules/bootstrap/dist/css/bootstrap.min.css，而不是node_modules/bootstrap/dist/css/bootstrap.min.css。

Answer 2

在angular 6 angular.json文件中，使用引导程序或超棒的CSS文件，这样可以解决您的问题。

   "styles": [
          {
            "input": "./node_modules/bootstrap/dist/css/bootstrap.min.css"
          },
          {
            "input": "./node_modules/font-awesome/css/font-awesome.min.css"
          },
          "src/styles.css"
        ],

Answer 3

字面上的错误路径是原因。在 style.css 前面添加 src / 。

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

Answer 4

在创建新项目时，我遇到过很多次。

确保bootstrap.min.css的路径与错误消息和angular.json中的路径一致
在更改angular.json文件时停止应用程序
再次运行

是

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

或

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

取决于错误消息的路径

Answer 5

我遇到了同样的错误。根据您的文件路径，答案已更改。只需看看您的路径并按照以下方法进行更正即可。

或

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

            ],

Answer 6

唯一适用于我的解决方案：

pointSize

Answer 7

我遇到了几乎相同的问题，我也尝试卸载并重新安装 Bootstrap 程序包，但事实并非如此。

ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css Module not found: Error: Can't resolve 'D:\angular\node_modules\bootstrap\dist\css\bootstrap.min.css' in 'D:\angular\jsonFile'

我在 angualr.json 中的路径是

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

删除前点对我有用。

"node_modules/bootstrap/dist/css/bootstrap.min.css"

Answer 8

这对我有用

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

Answer 9

我也有这个问题。这样做：
在angular.json文件中，使用以下声明（请注意“。”和“ /”）：

"styles": [
          {
            "input": "./node_modules/bootstrap/dist/css/bootstrap.min.css"
          },
          {
            "input": "./node_modules/font-awesome/css/font-awesome.min.css"
          },
          "src/styles.css"
        ],

或

"styles":
         "src/styles.css",
         "node_modules/font-awesome/css/font-awesome.css"

不要忘记重建项目以查看更改

Answer 10

我在一个全新的angular 7项目中遇到了同样的问题。刚安装它，npm启动并得到错误：多个./src/styles.sass中的错误所以我打开了angular.json，然后：

      "styles": [
         "src/styles.sass"   <--  I had styles.scss file, not this styles.sass
       ],

我刚刚将styles.sass重命名为styles.scss，因为该文件存在于项目文件夹中，并且npm重新启动。这解决了我的问题。

Answer 11

在出现相同错误后，我使用npm update命令进行更新。我更改了我的angular.js文件的样式，删除了F：\ xxxx \ node_modules \ ngx-select-dropdown \ dist \ assets \ style.css'，那里没有css文件。我保存并停止了角度倾斜，再次运行倾斜发球。一切正常。

https://github.com/manishjanky/ngx-select-dropdown/issues/112 最新版本的style.css不再相关，这就是为什么我删除了ngx-select-dropdown的最后一个CSS文件的原因。就是这样。

Answer 12

可以通过以下方式解决问题：尝试：

 "styles": [
              {
                "input": "./node_modules/bootstrap/dist/css/bootstrap.min.css"
              },
              {
                "input": "./node_modules/font-awesome/css/font-awesome.min.css"
              },
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Answer 13

我尝试了如下步骤：

使用：

../node_modules/bootstrap/dist/css/bootstrap.min.css

代替

node_modules/bootstrap/dist/css/bootstrap.min.css

保存所有内容并退出编辑器，然后再次运行，它对我有用，大多数情况下，如果您遇到任何错误，请保存所有内容，然后退出编辑器，再次打开并再次运行，希望它可以工作

Answer 14

它们从项目文件夹外部开始，您需要链接到src并将其定向到styles.css文件。复制此：

“ src / styles.css”

〜Khai Lim

Answer 15

为我工作： “ styles”：[“ ./node_modules/bootstrap/dist/css/bootstrap.min.css”，“ src / styles.css”]，

Answer 16

在angular 6中，您必须从angular.json中删除此行 “ ./node_modules/bootstrap/dist/css/bootstrap.min.css”，

一切正常。

Answer 17

这种类型的问题是由于文件路径错误引起的。

尝试“ ../node_modules/bootstrap/dist/css/bootstrap.min.css”代替“ ../ node_modules / bootstrap / dist / css / bootstrap.min.css”

Answer 18

将引导程序添加到有角json配置文件中，而不是添加到styles.css中（这是无效的，因为它是css，而不是scss）。

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

Answer 19

The problem can be solved in two ways:

1. Go to angular.json and under styles add the following lines

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

            ],

Or

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

              ],

Please try them the second one worked for me

2. Go to the file named "styles.css" and add the following line of code.

 @import '~bootstrap/dist/css/bootstrap.min.css';

Answer 20

我相信只有一个解决方案。问题是道路。键入./或输入将无济于事。如果出现““”错误。“错误在多个./node_modules/bootstrap/dist/css/bootstrap.min.css”中，则表示未将其安装在正确的位置。如果您正在读一本书，那么简单的解决方案是导航至“命令提示符”并导航至您的项目文件夹并在其中安装引导程序。或在angular.jason文件中提供引导的完整路径。

Answer 21

请尝试以下提到的命令：

npm重建node-sass

Answer 22

在 Angular 8 中使用 ngx-toastr 时，我遇到了类似的问题。我必须按以下顺序将.css样式引用放在 angular.json 文件中：

        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css",
          "node_modules/ngx-toastr/toastr.css" 
        ],
        "scripts": [
        ]

并按以下顺序在 styles.css 文件中使用@imports：

 @import '~bootstrap/dist/css/bootstrap.min.css';
 @import '~ngx-toastr/toastr.css';

它解决了这个问题。

Answer 23

我遇到了同样的问题，然后我在这样的路径下应用了不带点（。）和斜杠/

的路径

"node_modules/bootstrap/dist/css/bootstrap.min.css",

Answer 24

我遇到了同样的问题，这对我来说很有效。

angular.json：

"styles": [             
            "src/styles.css"              
        ],

styles.css：

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

Answer 25

我有同样的问题。这对我有用。

 "styles": [
          "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "node_modules/bootstrap/dist/css/bootstrap.css",
          "src/sass/styles.scss"
        ],

这也是可行的。

"styles": [
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "./node_modules/bootstrap/dist/css/bootstrap.css",
          "src/sass/styles.scss"
        ]

Answer 26

我为这个错误而苦苦挣扎。只需看看您的路径并按照以下步骤进行纠正即可。

"styles": [
          "node_modules/@nebular/theme/styles/prebuilt/default.css"
        ],

Answer 27

检查节点模块文件夹下我们在“样式”和“脚本”下链接的各个文件是否可用。最近在我的项目中，更新软件包时遇到了这个问题。我注意到有些缺少我们提到的cli JSON的文件。添加必要的文件后，此错误已得到解决。希望对您有所帮助。

Answer 28

我从angular.json取代了这些样式

"styles": ["src/styles.css"]

到

"styles": ["styles.css"]

对我有用！

Answer 29

为我工作！

"styles": [{
    "input": "./node_modules/bootstrap/dist/css/bootstrap.min.css"
  },
  {
    "input": "./node_modules/ti-icons/css/themify-icons.css"
  },
  "src/assets/icon/icofont/css/icofont.min.css",
  "src/styles.css"
]

Answer 30

您可以将bootstrap.min.css从节点模块导入到

这样的styles.css文件中。

@import ~/bootstrap/dist/css/bootstrap.min.css;

或在样式[]下将此启动程序文件添加到angular（-cli）.json文件中（此文件将一直为cli.json直到Angular 5，在6中仅是angular.json）。

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

我们只需要找出解析器的正确路径即可找到引导程序的安装路径。

Answer 31

你为什么Uri

angular.json

但是您的整体风格是"styles": ["styles.scss"], "scripts": []

请确保您拥有styles.css文件。因为抛出错误是因为您没有style.scss文件。

Answer 32

我认为是因为引导程序存在问题，请尝试以下操作：步骤1。删除“ ../node_modules/bootstrap/dist/css/bootstrap.min.css” 第2步。转到styles.css 通过添加此行来导入引导程序 @import“〜bootstrap / dist / css / bootstrap.css”; 这些步骤解决了我在构建过程中遇到的错误。

Angular 6中的多个./styles.css中的错误

32 个答案: