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

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

在角度6 angular.json文件中，使用bootstrap或font-awesome 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 2

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

Answer 3

我挣扎着这个错误。只需看看你的路径并按照以下说明纠正。

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

Answer 4

我遇到过同样的问题。这个对我有用。

 "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 5

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

angular.json：

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

styles.css的：

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

Answer 6

它基本上采取了错误的道路。我们需要把路径当作../node_modules/bootstrap/dist/css/bootstrap.min.css而不是node_modules/bootstrap/dist/css/bootstrap.min.css。

Answer 7

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

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

            ],

要么

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

        ],

Answer 8

唯一对我有用的解决方案：

1/   delete "node-modules"
2/   "npm install [email protected] --save"
3/   "npm install"
4/   "npm rebuild node-sass"

Answer 9

将引导程序添加到角度json配置文件而不是styles.css（它不起作用，因为它是css，而不是scss）。

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

Answer 10

为什么你angular.json

 "styles": ["styles.scss"],
 "scripts": []

但你的全球风格是styles.css

---

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

Answer 11

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

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

或者将此引导文件添加到angular（-cli）.json（此文件将是cli.json，直到Angular 5和6中它只是angular.json）文件在styles []下。

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

我们只需要弄清楚解析器能够找到安装bootstrap的路径的正确路径。

Answer 12

为我工作！

"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 13

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

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

至

"styles": ["styles.css"]

它对我有用！