I am trying to add Bootstrap to my Angular app. I am new to this and although following the required steps I am having problems getting the bootstrap installed.
I did all the necessary steps from installing Angular cli, ng new first-app and ng serve.
I opened the vs code terminal and tried installing bootstrap using
npm install bootstrap --save
Then adding this in the style.css
@import "~bootstrap/dist/css/bootstrap.css"
But still when I click on the link hovering over the above piece of code it says unable to locate file and prompts for creating a file with this path.
I am trying to add Bootstrap to my Angular app. I am new to this and although following the required steps I am having problems getting the bootstrap installed.
I did all the necessary steps from installing Angular cli, ng new first-app and ng serve.
I opened the vs code terminal and tried installing bootstrap using
npm install bootstrap --save
Then adding this in the style.css
@import "~bootstrap/dist/css/bootstrap.css"
But still when I click on the link hovering over the above piece of code it says unable to locate file and prompts for creating a file with this path.
Share Improve this question asked May 4, 2020 at 19:26 Ayan DasAyan Das 231 silver badge3 bronze badges5 Answers
Reset to default 3If you just want to add the styles from bootstrap there is a property in the angular.json file that allows you to include it in the build.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"projects": {
"yourproject": {
"architect": {
"build": {
"options": {
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
]
},
...
See: https://angular.io/guide/workspace-config#styles-and-scripts-configuration
Add the below line in the style.css file which is present under the src folder inside the project.
@import '~bootstrap/dist/css/bootstrap.min.css';
Wele to StackOverflow!
Bootstrap isn't TypeScript code, so you don't import it as such. Instead, it is CSS code, and thus you want to import it in your index.html file as a `
Here's how I import boostrap in my apps -- the below goes into the <head> tag of index.html
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
Doing this then allows me to use Bootstrap within any of my code templates.
BTW, that code will link to the 4.3.1 version -- if you want to link to a different version, you can go to https://getbootstrap./ and get a "fresh" link -- the site is very helpful in getting you going with the CDN links.
But I see that you want to import it into your styles.css file, so you'll likely have to use a relative path, probably something like:
@import "../node_modules/bootstrap/dist/css/bootstrap.css";
An easy method to add bootstrap is by using Angular CLI(npm install).
From the mand line interface install bootstrap and references it in angular.json
npm install bootstrap --save
If you want to add [email protected] || Here is the procedure.
Step 1. Install bootstrap. Run this mand in your terminal.
npm install [email protected]
Step 2. Install Jquery. Run this mand
npm install jquery
Step 3. Then, go to the angular.json file
...
"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...
Step 4. Don't forget to restart your app.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744904457a4600169.html
评论列表（0条）