For creating an angular project with sass with angular CLI make sure that you have installed Node and Angular CLI. If you have not installed, you need to first setup Angular ClI on your system. You can read my another post for “How to Install Angular 2 using CLI on Windows Machine?”
Use Bootstrap SASS with Angular CLI:
1. Create a new Angular CLI project with the SASS style option:
|
1 2 |
ng new my-app --style=sass cd my-app |
2. Install the SASS version of the Bootstrap project with:
This command will install bootstrap sass and save.
|
1 |
npm install bootstrap-sass --save |
3. Configure sass variable file.
For managing and changing variable according to your need and your project need you need to store in src directory.
In the src/assets/ directory, create a directory and named it bootstrap-sass with an empty file named: _variables.scss.
Now In this _variables.scss file, paste the content from:
|
1 |
node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss |
In the _variables.scss file, find the line with $icon-font-path and change the path from node directory.
|
1 |
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../node_modules/bootstrap-sass/assets/fonts/bootstrap/") !default; |
4. Add bootstrap sass In src/styles.sass
|
1 2 |
@import "assets/bootstrap-sass/variables"; @import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap'; |
Now you can run the project with the ng serve command. you can now access bootstrap in your project.
[paypal-donation]
