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 .

only need to change the file that is loaded in angular.json according to the existing file the answer is here — Agus Suhardi, Commented Mar 18, 2019 at 6:19

lupa · Accepted Answer · 2018-07-06 01:41:21Z

18

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"
        ],

answered Jul 6, 2018 at 1:41

lupa

5272 silver badges7 bronze badges

1

still not able to fix it in ng6,
– Developer
Commented Feb 1, 2019 at 6:11

Add a comment |

Robert · Accepted Answer · 2018-08-06 16:49:47Z

8

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.

edited Aug 6, 2018 at 16:49

Robert

8,77356 gold badges135 silver badges176 bronze badges

answered Aug 6, 2018 at 15:13

Pranendu Banerjee

811 bronze badge

Hi Pranendu, is that actually an answer?
– hakamairi
Commented Aug 6, 2018 at 15:46
Yes..I faced this same issue myself and fixed ...!!
– Pranendu Banerjee
Commented Aug 8, 2018 at 4:50
Hi Hakamairi , ++ I am very new user to STACKOVERFLOW ...so I just posted the solution the way I got it , anything wrong in this approach ? please clear .
– Pranendu Banerjee
Commented Aug 8, 2018 at 5:21
Even in my case path was incorrect..After correcting style.css path my issue get resolved
– Sushil Jadhav
Commented Nov 27, 2018 at 12:49

Add a comment |

Shahid · Accepted Answer · 2019-07-13 15:29:39Z

6

this work for me

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

answered Jul 13, 2019 at 15:29

Shahid

1595 silver badges16 bronze badges

Add a comment |

kingabdr · Accepted Answer · 2019-01-31 14:12:38Z

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"

answered Jan 31, 2019 at 14:12

kingabdr

6681 gold badge7 silver badges13 bronze badges

Add a comment |

mohammad mirshojaee · Accepted Answer · 2019-07-11 17:16:06Z

I had this problem too. Do this:
in angular.json file, use on of these declarations (pay attention to "." and "/"):

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

or

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

Don't forget to rebuild project to see changes

Chamila Maddumage · Accepted Answer · 2018-12-27 07:14:42Z

3

I faced the same error. According to your file path answer is changed. Just look at your path and correct it as following ways.

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

        ],

answered Dec 27, 2018 at 7:14

Chamila Maddumage

3,8962 gold badges34 silver badges44 bronze badges

Add a comment |

Tinu Mathai · Accepted Answer · 2020-03-29 08:22:01Z

3

Literally the wrong path is the reason. Include src/ in front of style.css.

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

answered Mar 29, 2020 at 8:22

Tinu Mathai

882 bronze badges

Add a comment |

Char · Accepted Answer · 2020-03-20 06:29:39Z

I've encountered this one many times when creating new projects.

Make sure the path of the bootstrap.min.css coincide with the path in the error message and angular.json
Stop the application when making changes to angular.json file
Run again

it's either

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

or

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

depending on the path from the error message

Carsten · Accepted Answer · 2018-06-26 04:53:42Z

1

Add bootstrap to the angular json configuration file instead of the styles.css (it doesn't work because it's css, not scss).

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

answered Jun 26, 2018 at 4:53

Carsten

4,22825 silver badges30 bronze badges

I got this after applying the above two lines ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ./styles.scss Module not found: Error: Can't resolve 'C:\Users\User\e-CommerceWebsite\styles.scss' in 'C:\Users\User\e-CommerceWebsite' ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ./styles.scss Module not found: Error: Can't resolve 'C:\Users\User\node_modules\bootstrap\dist\css\bootstrap.min.css' in 'C:\Users\User\e-CommerceWebsite' @Carsten
– Zhu
Commented Jun 26, 2018 at 4:56

Add a comment |

Roy Scheffers · Accepted Answer · 2018-10-07 07:22:35Z

1

Worked for me !

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

edited Oct 7, 2018 at 7:22

Roy Scheffers

3,90811 gold badges33 silver badges36 bronze badges

answered Oct 7, 2018 at 6:55

Pranavjeet Mishra

111 bronze badge

3

For a useful answer this reaction needs to be extended. Explain why this is an answer to the question.
– Jeroen Heier
Commented Oct 7, 2018 at 7:00

Add a comment |

Houssem Hamila · Accepted Answer · 2019-01-21 13:14:25Z

1

I struggled with this error. Just look at your path and correct as following.

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

answered Jan 21, 2019 at 13:14

Houssem Hamila

314 bronze badges

Add a comment |

Günay Gültekin · Accepted Answer · 2019-02-05 06:12:08Z

1

I had the same issue. This one works for me.

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

and also this one works.

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

answered Feb 5, 2019 at 6:12

Günay Gültekin

4,8018 gold badges35 silver badges36 bronze badges

Add a comment |

Jake Neumann · Accepted Answer · 2019-02-13 10:13:09Z

1

I had the same issue, this worked out for me.

angular.json:

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

styles.css:

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

answered Feb 13, 2019 at 10:13

Jake Neumann

3804 silver badges13 bronze badges

Add a comment |

fmsthird · Accepted Answer · 2019-06-17 08:48:14Z

1

I have the same issue then I apply below path like this without dot (.) and slash/

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

edited Jun 17, 2019 at 8:48

fmsthird

1,8823 gold badges18 silver badges36 bronze badges

answered Jun 17, 2019 at 7:26

Fahim khan

411 bronze badge

Add a comment |

heroesch · Accepted Answer · 2019-06-23 00:42:28Z

I had a similar problem using ngx-toastr with Angular 8. I had to place the .css styles references in the following order within the angular.json file:

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

And the @imports within the styles.css file in the following order:

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

It solved the problem.

Mursalin Malik · Accepted Answer · 2019-10-10 08:50:08Z

I was having almost same issue, I tried uninstalling and reinstalling Bootstrap package also but it did't prove fruitful.

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'

My path in angualr.json was

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

removing front dots worked for me.

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

Akshay Sharma · Accepted Answer · 2019-10-15 19:19:46Z

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

Combine · Accepted Answer · 2019-10-18 15:33:26Z

1

I had the same issue with a brand new angular 7 project. Just Installed it, npm start and got the error: ERROR in multi ./src/styles.sass So I opened angular.json and:

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

I just renamed styles.sass to styles.scss because that file was present in the project folder and npm start again. This resolved my issue.

answered Oct 18, 2019 at 15:33

Combine

4,2342 gold badges31 silver badges31 bronze badges

Add a comment |

Chander Mohan · Accepted Answer · 2020-06-09 10:21:34Z

I update by using npm update command after i got the same error. I changed my angular.js file in styles removed F:\xxxx\node_modules\ngx-select-dropdown\dist\assets\style.css', css file is not present there. I saved and stopped my angular cli, again run cli ng serve. It started working fine.

https://github.com/manishjanky/ngx-select-dropdown/issues/112 latest version the style.css is no longer relevant, that's why i removed the last css file of ngx-select-dropdown. That's all.

Ravi kant · Accepted Answer · 2020-10-24 07:01:43Z

1

This type issue generates due to wrong path of files.

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

answered Oct 24, 2020 at 7:01

Ravi kant

133 bronze badges

Add a comment |

MrZ · Accepted Answer · 2020-12-13 23:20:11Z

I believe there is only one solution for this. Issue is path. Buyt typing down ./ or input is not going to help. If you getting ""ERROR in multi ./node_modules/bootstrap/dist/css/bootstrap.min.css"" error that means you didn't install it in the correct place. If you are studying from a book or so then the easy solution is to navigate to Command prompt and navigate to your project folder and install bootstrap there. Or give the full path to bootstrap on angular.jason file.

Dinh Duong · Accepted Answer · 2018-06-26 06:10:06Z

0

Why you angular.json

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

But your global style is styles.css

Please make sure you have style.scss file. Because the error throw is you don't have the style.scss file.

answered Jun 26, 2018 at 6:10

Dinh Duong

2972 silver badges10 bronze badges

please take a look at my updated post ,still I got the error after changing the scss to css @DinhDuong
– Zhu
Commented Jun 26, 2018 at 6:26

Add a comment |

Sidd Thota · Accepted Answer · 2018-08-03 15:02:04Z

You can either import the bootstrap.min.css from node modules into the styles.css file like

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

Or add this bootstrap file in the angular(-cli).json (this file will be cli.json until Angular 5 and in 6 its just angular.json) file under styles [].

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

We just need to figure out the right path for the parser to be able to find the path where bootstrap is installed.

Prashant Pimpale · Accepted Answer · 2018-12-21 07:33:10Z

0

I replaced these styles from angular.json

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

to

"styles": ["styles.css"]

It worked for me!

edited Dec 21, 2018 at 7:33

Prashant Pimpale

10.7k10 gold badges50 silver badges87 bronze badges

answered Dec 21, 2018 at 7:28

manjunath hiremath

1

Add a comment |

Antu · Accepted Answer · 2019-01-09 07:23:47Z

0

check whether the respective files which we linked under 'styles' and 'scripts' are available under node modules folder. Recently in my project, I got this issue while updating packages. I noticed that some files which we referred angular cli JSON got missed. This error has been resolved after adding the necessary files. Hope it helps.

edited Jan 9, 2019 at 7:23

Antu

2,3334 gold badges26 silver badges42 bronze badges

answered Jan 9, 2019 at 6:09

Uma

1

Add a comment |

Đinh Công Hân · Accepted Answer · 2019-05-15 10:29:59Z

0

I think it is because of the problem with bootstrap, try this: Step 1. Remove "../node_modules/bootstrap/dist/css/bootstrap.min.css" Step 2. Go to styles.css Import bootstrap by adding this line @import "~bootstrap/dist/css/bootstrap.css"; These steps solved the errors I got during the building process.

answered May 15, 2019 at 10:29

Đinh Công Hân

11

Add a comment |

Ajay · Accepted Answer · 2019-09-17 09:48:52Z

0

Try below mentioned command:

npm rebuild node-sass

answered Sep 17, 2019 at 9:48

Ajay

9753 gold badges13 silver badges28 bronze badges

Add a comment |

Tarik Majid · Accepted Answer · 2019-11-09 13:52:39Z

0

In angular 6 you have to delete this line from your angular.json "./node_modules/bootstrap/dist/css/bootstrap.min.css",

it well work fine.

answered Nov 9, 2019 at 13:52

Tarik Majid

232 bronze badges

Add a comment |

RAKESH CHOUDHARY · Accepted Answer · 2019-12-26 12:55:33Z

0

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

answered Dec 26, 2019 at 12:55

RAKESH CHOUDHARY

112 bronze badges

Add a comment |

Khai Lim · Accepted Answer · 2020-02-05 21:39:02Z

0

They started from outside of project folder and you need to link to src and direct them to styles.css file. Copy this:

"src/styles.css"

~Khai Lim

answered Feb 5, 2020 at 21:39

Khai Lim

512 bronze badges

Add a comment |

Collectives™ on Stack Overflow

ERROR in multi ./styles.css in Angular 6

33 Answers 33

Linked

Hot Network Questions

Collectives™ on Stack Overflow

33 Answers 33

Linked

Related