angular2-cli gives @multi styles error

Question

I started using angular2-cli recently and created a new project. I wanted to use bootstrap in my project hence I installed bootstrap and then wanted to import the bootstrap css file like it is shown in the the angular2-cli guide here. https://github.com/angular/angular-cli#global-library-installation After running ng serve I get the following error.

ERROR in multi styles Module not found: Error: Can't resolve '/home/krishna/angular2_migrate/webui/node_modules/bootstrap/dist/css/bootstrap.min.css' in '/home/krishna/angular2_migrate/webui/node_modules/angular-cli/models' @ multi styles

What am I doing wrong ?

Information about angular2-cli version

krishna@Krishna:~/angular2_migrate/webui$ ng version
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.17
node: 4.4.3
os: linux x64

Noopur Dabhi · Accepted Answer · 2019-03-25T07:50:56.310

22

Add ../ before path.

In angular-cli.json,

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

Update

In angular7, there is angular.json file and you do not need to add ../ before path

edited Mar 25 '19 at 07:50

answered Mar 09 '17 at 14:37

Noopur Dabhi

1,867
25
38

6

Almost worked for me. It worked only when I used `"./node_modules/bootstrap/dist/css/bootstrap.min.css"` – MWB Apr 27 '19 at 08:57
@MWB solution worked for me, placing "../" before path is throwing error, so replaced with "./" – Sagar M Jul 19 '20 at 13:50

score 9 · Answer 2 · answered Feb 01 '19 at 02:51

In Angular 7 the file is called 'angular.json'.

Make sure you got the right extension set for the "styles" option. In my case I installed the Angular CLI with the SCSS option but the extension was set as SASS by default.

       "styles": [
          "src/styles.scss" // default was: src/styles.sass
        ],

Roger Perez · Answer 3 · 2019-01-14T22:00:33.473

I am using Angular 6 so my filename is angular.json, but I was able to resolve the similar issue by removing the "../" path that it was asking for. Below is my setup for adding bootstrap and jquery to my angular app.

   "styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.css"
        ],
        "scripts": ["../node_modules/jquery/dist/jquery.js",
          "node_modules/bootstrap/dist/js/bootstrap.bundle.js"
      ]

Note: for jquery i needed the "../" while bootstap did not require it.

Alternate based on issues I had:

    "styles": [
          "src/styles.css", 
          "../node_modules/bootstrap/dist/css/bootstrap.css"
       ],
    "scripts": [
          "../node_modules/jquery/dist/jquery.js", 
          "../node_modules/bootstrap/dist/js/bootstrap.bundle.js"
      ]

Also, this article holds multiple alternate options on setting it .

https://medium.com/@rogercodes1/intro-to-angular-and-how-to-setup-your-first-angular-app-b36c9c3ab6ca

score 2 · Answer 4 · edited Jan 06 '19 at 17:06

2

give the path like "./node_modules/bootstrap/dist/css/bootstrap.min.css" not like "../node_modules/bootstrap/dist/css/bootstrap.min.css"

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

edited Jan 06 '19 at 17:06

Ariful Islam

7,639
7
36
54

answered Jan 06 '19 at 16:50

Sundeep

31
2

score 1 · Answer 5 · answered Mar 10 '18 at 06:02

In my case the error was was because i had

    "styles":[
      "styles.css"
    ]

in my .angular-cli.json

i solved it by manually typing the path of my all SCRIPTS and CSS ..i.e for example

    "styles":[
      "styles/bootstrap.scss",
      "styles/app.scss",
     ]

Paths in angular-cli.json are relative to the project root (src/ normally). For instance, you have the src/styles.css file, but in angular-cli.json it's listed only as styles.css.

score 1 · Answer 6 · answered Jan 06 '19 at 16:56

1

give the path like "./node_modules/bootstrap/dist/css/bootstrap.min.css" not like "../node_modules/bootstrap/dist/css/bootstrap.min.css"

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

answered Jan 06 '19 at 16:56

Sundeep

31
2

score 1 · Answer 7 · answered Apr 06 '19 at 18:09

1

Go to angular.json

navigate to styles and add another entry for bootstrap.min.css like

answered Apr 06 '19 at 18:09

suraj garla

322
3
6

score 0 · Answer 8 · answered Mar 10 '18 at 17:00

0

here is the fix for me. in you current directory you have a hidden file called .angular-cli.json open that and change the "style.sass" to "style.css: run ng build and you are done.

BEFORE: AFTER:

answered Mar 10 '18 at 17:00

grepit

21,260
6
105
81

score 0 · Answer 9 · edited Oct 03 '18 at 01:22

0

The solution below worked for me, as it seems there is a bug in bootstrap 4.0:

npm uninstall bootstrap --save

then install

npm install bootstrap@3.3.7 --save

edited Oct 03 '18 at 01:22

Alex Kulinkovich

4,408
15
46
50

answered Jul 21 '18 at 18:49

user2181047

1
1
4

score 0 · Answer 10 · answered Aug 25 '18 at 09:12

I had same problem but I solve that issue by giving full path of the file like below "styles": [ "F:/Angular2Projects/Angular/myapp/node_modules/bootstrap/dist/css/bootstrap.min.css", "F:/Angular2Projects/Angular/my-app/src/styles.css" ],

score 0 · Answer 11 · answered Apr 01 '19 at 01:52

0

You just need to add the below mentioned code in style.css

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

Hope it helps

answered Apr 01 '19 at 01:52

Yoshita Mahajan

443
4
6

score 0 · Answer 12 · answered Jul 21 '19 at 19:20

0

Copy and paste the following in your {}angular.json file should work perfect.

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

answered Jul 21 '19 at 19:20

Dholu

658
7
14

score 0 · Answer 13 · answered Aug 17 '19 at 18:56

0

I got same error in angular 7 after installing primeng

I removed ./ from path in angular.json file rename "src/styles.scss" from "src/styles.css" and it works for me

answered Aug 17 '19 at 18:56

Mukesh Kumar Mehta

51
1
3

score 0 · Answer 14 · answered Sep 16 '19 at 06:46

0

In file angular.json , I changed styles.sass to styles.scss .

I build successfully

that is navigate to src folder and see the extension of styles file

change it accordingly in angular.json styles object

answered Sep 16 '19 at 06:46

Ever Think

683
8
22

score 0 · Answer 15 · edited Nov 04 '19 at 15:33

0

I had the same issue. I resolved it by uninstalling bootstrap

npm uninstall bootstrap --save

and then, installing it again

npm uninstall bootstrap --save

It worked for me.

edited Nov 04 '19 at 15:33

Shankar

2,890
3
25
40

answered Nov 04 '19 at 14:49

Manish Kumar

17
3

score 0 · Answer 16 · answered Jun 12 '20 at 15:54

0

Full physical path to be given for node_modules .I have given full physical path for the css file and finally solve the issues

answered Jun 12 '20 at 15:54

Karthic Mohandhoss

1

Could you please include the css file and the path in your answer? – 10 Rep Jun 12 '20 at 19:31

angular2-cli gives @multi styles error

16 Answers16

Linked