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-25 07:50:56Z

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, 2019 at 7:50

answered Mar 9, 2017 at 14:37

Noopur Dabhi

1,94726 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MWB Over a year ago

Almost worked for me. It worked only when I used "./node_modules/bootstrap/dist/css/bootstrap.min.css"

Sagar M Over a year ago

@MWB solution worked for me, placing "../" before path is throwing error, so replaced with "./"

atfede · Accepted Answer · 2019-02-01 02:51:16Z

9

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

answered Feb 1, 2019 at 2:51

atfede

4116 silver badges9 bronze badges

Comments

Roger Perez · Accepted Answer · 2019-01-14 22:00:33Z

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

Ariful Islam · Accepted Answer · 2019-01-06 17:06:38Z

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 6, 2019 at 17:06

Ariful Islam

7,6837 gold badges38 silver badges55 bronze badges

answered Jan 6, 2019 at 16:50

Sundeep

312 bronze badges

Comments

Felix Runye · Accepted Answer · 2018-03-10 06:02:50Z

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.

Sundeep · Accepted Answer · 2019-01-06 16:56:22Z

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 6, 2019 at 16:56

Sundeep

312 bronze badges

Comments

suraj garla · Accepted Answer · 2019-04-06 18:09:54Z

1

Go to angular.json

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

answered Apr 6, 2019 at 18:09

suraj garla

3183 silver badges6 bronze badges

Comments

grepit · Accepted Answer · 2018-03-10 17:00:59Z

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, 2018 at 17:00

grepit

22.6k6 gold badges109 silver badges82 bronze badges

Comments

jagdish khetre · Accepted Answer · 2018-08-25 09:12:26Z

0

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

answered Aug 25, 2018 at 9:12

jagdish khetre

1,4412 gold badges11 silver badges17 bronze badges

Comments

Alex Kulinkovich · Accepted Answer · 2018-10-03 01:22:23Z

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 [email protected] --save

edited Oct 3, 2018 at 1:22

Alex Kulinkovich

4,80815 gold badges52 silver badges55 bronze badges

answered Jul 21, 2018 at 18:49

user2181047

11 silver badge5 bronze badges

Comments

Yoshita Mahajan · Accepted Answer · 2019-04-01 01:52:18Z

0

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

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

Hope it helps

answered Apr 1, 2019 at 1:52

Yoshita Mahajan

4634 silver badges6 bronze badges

Comments

Dholu · Accepted Answer · 2019-07-21 19:20:30Z

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, 2019 at 19:20

Dholu

7177 silver badges15 bronze badges

Comments

Mukesh Kumar Mehta · Accepted Answer · 2019-08-17 18:56:06Z

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, 2019 at 18:56

Mukesh Kumar Mehta

611 silver badge3 bronze badges

Comments

Ever Think · Accepted Answer · 2019-09-16 06:46:56Z

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, 2019 at 6:46

Ever Think

81112 silver badges24 bronze badges

Comments

Shankar · Accepted Answer · 2019-11-04 15:33:55Z

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 4, 2019 at 15:33

Shankar

3,0863 gold badges28 silver badges41 bronze badges

answered Nov 4, 2019 at 14:49

Manish Kumar

135 bronze badges

Comments

Karthic Mohandhoss · Accepted Answer · 2020-06-12 15:54:08Z

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, 2020 at 15:54

Karthic Mohandhoss

1

1 Comment

10 Rep Over a year ago

Could you please include the css file and the path in your answer?

Collectives™ on Stack Overflow

angular2-cli gives @multi styles error

16 Answers 16

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

16 Answers 16

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Related