ERROR in multi ./styles.css in Angular 6

Question

I am new to Angular 6 ,In my project I got the below error

 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'

and the browser shows

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';
...
...
...

Referred this : bootstrap not connect to the angular 6?

Can anyone help me to fix this error .

Answer 1

In angular 6 angular.json file, use the bootstrap or font-awesome css file like this will fix your issue.

   "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

It basically takes the wrong path. We need to put the path as ../node_modules/bootstrap/dist/css/bootstrap.min.css instead of node_modules/bootstrap/dist/css/bootstrap.min.css.

Answer 3

this work for me

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

Answer 4

The only solution that worked for me:

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