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
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
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 .
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"
]
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.
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"
]
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"
],
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
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
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" ],
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
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
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.
来源:https://stackoverflow.com/questions/40025762/angular2-cli-gives-multi-styles-error