Issue
I'm using angular-cli to build an Angular 4 app. I would like to use ng-bootstrap to include Bootstrap 4. However I would also like to customise Bootstrap's scss variables in my build as described at http://v4-alpha.getbootstrap.com/getting-started/options/.
How can I do this?
Solution
Angular CLI stories gives an answer at https://github.com/angular/angular-cli/wiki/stories-include-bootstrap which I will summarise below. Note that I am yet to find out how this interacts with ng-bootstrap
.
Create a project:
ng new my-app --style=scss
cd my-app
Install Bootstrap 4:
npm install bootstrap@next --save
Configuring Project
Create an empty file _variables.scss
in src/
which is where your style modifications will go.
In styles.scss
add the following:
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
Testing Project
Open app.component.html and add the following markup:
<button class="btn btn-primary">Test Button</button>
With the application configured, run ng serve
to run your application in develop mode. In your browser navigate to the application localhost:4200
.
Verify the bootstrap styled button appears. To ensure your variables are used open _variables.scss
and add the following:
$brand-primary: red;
Return the browser to see the font colour changed.
Answered By - Dan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.