How to setup boot 4 using angular-cli
I have an Angular 4 app using angular-cli 1.0 and Bootstrap 4-alpha6. I want to customize Bootstrap 4. For example. change the color of the main buttons.
This must be future proof. This means that my settings have to withstand bootstrap updates at a later point in time.
I have an embedded bootstrap: Adding "bootstrap": "4.0.0-alpha.6",
depending on my package.json file. Also, I added
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
before "apps"
in angular-cli.json.
My first attempt was to create a new file called style.scss, put it in src / assets, and also reference it in angular-cli.json.
The content might look like this:
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
$body-bg: $gray-dark;
$body-color: $gray-light;
The ng serve
app commits fine on startup, but I don't see any changes.
Did I even start in the right direction? How do I properly configure bootstrap buttons / styles via sass in a pure angular-cli workflow?
You can find the source here: https://github.com/nemoo/democratizer-angular/tree/ngbootstrap/frontend-angular
source to share
The values you are trying to change $body-bg
and $body-color
are SASS values, not CSS values.
Therefore, you will need to link to the SASS files, not the CSS file.
Update the default style file from styles.css
to styles.scss
and in this file ...
// set the variables you wish to change
$body-bg: $gray-dark;
$body-color: $gray-light;
// import in the bootstrap SASS file
@import '../node_modules/bootstrap/scss/bootstrap'
You can read it here .
source to share