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没有连接角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文件中，使用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 3

这对我有用

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

Answer 4

将 bootstrap 添加到 Angular json 配置文件而不是 styles.css （它不起作用，因为它是 css，而不是 scss）。

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